topic Re: Section 508 Compliance with the JavaScript API? in ArcGIS JavaScript Maps SDK Questions

Section 508 Compliance with the JavaScript API?

Kathleen_Crombez — Thu, 25 Jun 2015 17:23:17 GMT

We have several web mapping applications built with the ESRI JavaScript API that are now required to be WCAG 2.0 AA / Section 508 compliant.

There are several issues I am running into.

1 - How do I bring focus to the map with the tab key?

I have tried this...

This solution will (sort of) work after pressing enter and the down arrow several times...

However, this only works when the mouse is hovering over the map.

This seems silly, because it really defeats the purpose of keyboard navigation.

2 - How can I make the keyboard navigation work when the mouse is not hovering over the map?

3 - How can I set focus to the zoom slider buttons?

4 - How can I add alt tags to the images that are rendered for the map layers?

5 - How can I add widget roles to the map container, graphics layers, and the zoom slider buttons?

I am using the AInspector add on for firefox to test my site.

These are all issues that are coming up on the most simplest map you can make with the JavaScript API.

More complex maps have additional issues, but I am interested if anyone knows how to handle these basic issues that every map has.

Any help would be most appreciated.

Re: Section 508 Compliance with the JavaScript API?

SteveCole — Thu, 25 Jun 2015 18:00:02 GMT

I don't have an answer for making a JS API app compliant but perhaps give this ESRI produced PDF a look:

ArcGIS Online Voluntary Product Accessibility Templates (VPATs)

It's a link off of a more general page (this and this). Perhaps one could argue that if even ESRI states that certain aspects of a web map cannot be 508 compliant, maybe they'll be less hardline about the entire app being compliant.

Steve

Re: Section 508 Compliance with the JavaScript API?

Kathleen_Crombez — Thu, 25 Jun 2015 19:12:06 GMT

Steve,

I appreciate your reply, but...

I have some very customized applications that are not easy to duplicate in ArcGIS Online.

For example, when a user selects a tax parcel, I do some advanced queries to display a table with all the tax information, along with the taxing districts that spatially intersects the parcel, and additional information contained in separate SDE tables and layers. Sure I could add all the layers, turn on the popups and force the user to tab through all the popups. But that is not as user friendly as displaying all the information in a nicely formatted table.

Additionally, most of the issues I have with the JavaScript API also come up as errors in ArcGIS Online. As a matter of fact, there are even more issues with ArcGIS Online maps because I find them difficult to customize and even when using the Web App Builder for Developers, we don't have access to all the source code.

So, I really don't understand how ESRI can claim ArcGIS Online is Section 508 compliant. You still cannot navigate the map with the keyboard unless the mouse is hovering over the map. What if the user does not have a mouse due to limited mobility?

This is even an issue with the WCAG Application Template.

I think ESRI needs to test some of their applications with some of the ADA heuristic tools available (such as AInspector, WAVE, etc...) and clean up their code to meet the standards we are being forced to comply with.

Re: Section 508 Compliance with the JavaScript API?

ChrisSmith7 — Thu, 25 Jun 2015 19:26:09 GMT

Could you create a non-map/text version of the application that will failover when a screenreader, or something like that, is detected? You could also give the user the option to switch to an accessible mode... It's a bit hard to make something so dynamic (maps/graphs) accessible, especially for people using screenreaders. Here's what Esri has to say about that:

(a) A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).
Supports with Exceptions
Most controls provide ‘alt’ text but some do not given the inherent nature of GIS software, mapping software, and/or general limits on the framework or technology. Note: ArcGIS Online contains geographic information system (GIS) technology that captures, manages, and analyzes data through digital maps. Some GIS functions (such as drawing lines on a digital map) cannot be represented with text equivalent and, therefore, no text equivalent exists for these functions.
(k) A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.
Not Applicable
ArcGIS Online is geographic information system (GIS) technology that captures, manages, and analyzes data through digital maps. Some aspects of a digital map or of GIS software are inherently visual/graphical and cannot be adequately represented in text.

Re: Section 508 Compliance with the JavaScript API?

SteveCole — Thu, 25 Jun 2015 19:41:31 GMT

I'm sorry this wasn't more clear- my intent with sharing the link was just to provide some supporting documentation about 508 compliance and web maps, and specifically the point (which you get) which is that there are just some things inherent with web maps that just can't be made accessible. ESRI states this in the document, and I thought it might be of some value in your discussions with those above you whom are instructing you to make your apps compliant.

Certainly you CAN add alt text to images (your point #4) via JS but I don't see how that is useful for rendered image depictions of the map. Certainly a form of parcel information such as what you described in your follow up example is a different story and for that, you can use SPAN tags and utilize the title attribute.

Interesting behavior that you describe with ArcGIS Online. I've used ArcGIS Explorer Online (which I think is slated for replacement) and in that application, you CAN use the map without the mouse physically being over the map. It seems to work as long as the browser tab is active. Anyways, I was hoping to provide some ammo to possibly help you get out of having to do some of this work.

Re: Section 508 Compliance with the JavaScript API?

ChrisSergent — Thu, 25 Jun 2015 20:02:15 GMT

Hi Kathleen Crombez

1. You shouldn't have to worry about that if you use the following.

I just tried this on my web app. You can refer to this page to allow the user to use keyboard keys to move the mouse pointer: Use Mouse Keys to move the mouse pointer It also tells you what the equivalent key is for the various mouse events. If you use something different than Windows 7, just perform a search on Use Mouser Keys to move the mouse pointer [your operating system]

Now when you move your pointer over the map, to get navigation back, you need to press the left ALT + left shift + NUM LOCK

This will allow for regular map navigation which can be found here: Map navigation | Guide | ArcGIS API for JavaScript

When you need to go back to the mouse, press press the left ALT + left shift + NUM LOCK and it will be in mouse mode again.

I can't say I tried the following, but I thought that key combination would be annoying; I tried to look up hotkeys. You can try this out(untested) - Turn Any Action Into a Keyboard Shortcut: A Beginner's Guide to AutoHotkey or something else to simplify the combination.

One more thing about this, make sure that your pointer under Set up Mouse Keys has a pointer speed of Top speed and the Acceleration is fast. I find that it does not appear to work if you don't do this.

3. The zoom slider buttons should be an element, so you should be able to inspect the element and the use the tabIndex.

4. Since the image should use an image source you should be able to concatenate your alt tag in JavaScript with whatever produces the image. You may need to check that out in the Development tools in your browser.

5. That one I'm not sure about. Can you give an example or share your code on something like JS Bin - Collaborative JavaScript Debugging to provide a basic example of what is not working for this one. I have used multiple widgets in my apps, so I may just need a visual to understand this one.

Hope this helps.

Re: Section 508 Compliance with the JavaScript API?

Kathleen_Crombez — Thu, 25 Jun 2015 20:05:49 GMT

I do appreciate all the information and replies.

Unfortunately, we were "randomly selected" to be audited from the US Department of Justice. Their initial agreement they sent us was super strict and required 100& compliance within 3 months. Thankfully we were able to negotiate the timeline but we really couldn't get them to budge on the requirements.

For the most part, ESRI has done a good job with making ArcGIS Online compliant. There are just certain things that could easily be fixed on their end, that makes life very difficult to developers.

For example, the search <input> box for the geolocator does not have a label. Certain widgets do not have roles. The site does not have a language code. No Landmarks are defined. These are just a few issues I have found.

And maybe I am being naïve, but I am finding it difficult to access the embedded DOM elements that do not have an id.

Re: Section 508 Compliance with the JavaScript API?

ChrisSergent — Thu, 25 Jun 2015 20:11:46 GMT

For ArcGIS Online, have you considered downloading Web AppBuilder for ArcGIS (Developer Edition) - Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers

You publish your ArcGIS Online web map into a web app and then modify the application's code for compliance.

Re: Section 508 Compliance with the JavaScript API?

Kathleen_Crombez — Thu, 25 Jun 2015 20:15:22 GMT

Yes, we are using the WAB Developer Edition. but you are limited to what you can modify. ESRI does not seem to provide full access to all the source code.

Re: Section 508 Compliance with the JavaScript API?

ChrisSergent — Thu, 25 Jun 2015 20:18:50 GMT

If there is code that you can't access, Robert Scheitlin, GISP could probably help you with that. I thought that I couldn't access code until I realized I did not have the Dev Edition which displayed after I installed it.

Re: Section 508 Compliance with the JavaScript API?

Kathleen_Crombez — Thu, 25 Jun 2015 20:32:54 GMT

Everyone has provided some interesting discussion about ArcGIS Online.

But I really need a solution that is easy and intuitive for navigating the map via keyboard only that works in the JavaScript API.

Re: Section 508 Compliance with the JavaScript API?

RobertScheitlin__GISP — Thu, 25 Jun 2015 20:41:08 GMT

Kathleen,

If you have specific questions regarding WAB the WAB community will be more than happy to assist, Just post questions to the WAB space Web AppBuilder for ArcGIS

Re: Section 508 Compliance with the JavaScript API?

ChrisSergent — Thu, 25 Jun 2015 20:47:58 GMT

Did you read my post at the bottom? I gave you information on how to use your keyboard for the mouse and how to navigate the map.

Re: Section 508 Compliance with the JavaScript API?

Kathleen_Crombez — Thu, 25 Jun 2015 20:56:22 GMT

Yes I did. But not all users will have Windows 7.

The problem is, we are being audited by the DOJ and we need to meet WCAG 2.0 AA for all users. Most people use the tab key to navigate the page without a mouse.

It would be nice if I could find a simple solution that is intuitive to the user to tab into the map, bring it into focus, and navigate using the +/- and arrow keys. Like I stated in my original post, adding the tabindex to the map div and calling focus on the map container sort of works. but only when the mouse is hovering over the map. Also it seems like I need to select the div with the enter key and tab down with the down arrow until the map itself comes into focus.

This is not a user friendly solution. If anyone else has a better way, I would love to hear it.

Re: Section 508 Compliance with the JavaScript API?

ChrisSergent — Thu, 25 Jun 2015 21:09:12 GMT

I'm not sure how to tab into the map but the example does allow you to use the keyboard and do everything without a mouse. I tested it on my machine and never touched a mouse. I had my mouse pointer on the left screen and moved the pointer to my third screen with just the keyboard and then zoomed in and out on the map, tabbed through controls and panned around, still with just a keyboard. As for other operating systems and setting up keyboards for mouse movement; here is Windows XP and Windows 8. I didn't see anything for Windows 10 yet, but imagine it's very similar.

Windows XP - BBC - My Web My Way - Using your keyboard to control the mouse in Windows XP

Windows 8 - Windows 8 Accessibility Tutorials: Use Numeric Keypad

Re: Section 508 Compliance with the JavaScript API?

Kathleen_Crombez — Thu, 25 Jun 2015 21:31:31 GMT

Chris - Which example are you referring to?

Re: Section 508 Compliance with the JavaScript API?

ChrisSergent — Thu, 25 Jun 2015 21:35:09 GMT

Where I numbered my responses to go with your questions. Answer number two tells you how to use your keyboard for your mouse and how to navigate with the keyboard. You may need to scroll down because it's at the bottom.

Re: Section 508 Compliance with the JavaScript API?

Kathleen_Crombez — Thu, 25 Jun 2015 21:45:08 GMT

Thanks! I will have to do some testing. We are also required to meet these standards for Mac.

Re: Section 508 Compliance with the JavaScript API?

ChrisSergent — Thu, 25 Jun 2015 21:50:18 GMT

And for Mac: OS X Mountain Lion: Control the pointer using Mouse Keys

Re: Section 508 Compliance with the JavaScript API?

Kathleen_Crombez — Mon, 13 Jul 2015 15:34:17 GMT

I would like to hear from ESRI ESRI on this issue. I still have not found a way to put focus on the map and navigate around the map without a mouse.

Chris Sergent had some interesting ways to navigate the mouse with the keyboard based on built in operating system controls... However, this solution still requires a mouse and is strictly reliant on the OS to have this feature.

What if the user does not have a mouse? What if they can't navigate a pointer on their OS? These are accessibility issues that I am trying to overcome in our web development.

Once again, I am looking for a way to navigate the map via keyboard only that does not rely on a mouse being attached to the computer at all. This is part of our WCAG 2.0 AA compliance requirements mandated to us from the Department of Justice.

The only way I was able to do this was to add custom zoom and pan buttons on my map that can be accessed by tabbing through the page. See the link below for an example.

Tile Index Map | Champaign County GIS Consortium

I would prefer if I didn't have to do this customization on every map I publish. Can ESRI please comment on this? Are there any plans for keyboard only navigation in future releases of the JavaScript API?