Section 508 Compliance with the JavaScript API?

Kathleen_Crombez · ‎06-25-2015

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.

ChrisSergent · ‎06-25-2015

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.

Kathleen_Crombez · ‎06-25-2015

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.

ChrisSergent · ‎06-25-2015

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

Kathleen_Crombez · ‎06-25-2015

Chris - Which example are you referring to?

ChrisSergent · ‎06-25-2015

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.

Kathleen_Crombez · ‎06-25-2015

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

ChrisSergent · ‎06-25-2015

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

ChrisSmith7 · ‎06-25-2015

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.

ChrisSergent · ‎06-25-2015

Hi Kathleen Crombez

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

2.

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.

Kathleen_Crombez · ‎07-13-2015

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?