Section 508 Compliance with the JavaScript API?

[Kathleen_Crombez]

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...

<div id="mapDiv" tabindex="0" onkeyup="document.getElementById('mapDiv_container').focus()"></div>

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]

Kelly Hutchins​ do you know who would be a good contact for this?

[KellyHutchins]

Kathleen,

You can set focus on the map by applying a tab index so users can tab into the map then navigate with the keyboard shortcuts. However I'm not sure how this will work if users are using a screen reader like Voice Over or Jaws.

      map.on("load", function(e){ 

        var node = dom.byId("mapDiv");

        node.setAttribute("tabindex", 0);

      });

For users with low-vision who are most likely using a screen reader one option I've seen written up in accessibility articles is just to hide the map and provide alternate text that describes the map content. So if you were generating driving directions you'd want to provide those as text or provide a text description of the map. This article contains a section titled 'Add a text equivalent to every image' that has a few more details.

Many sites with interactive maps are able to get an 'Undue Burden' exemption for dynamically generated content that is primarily visual like maps, charts etc.

I also wanted to include a link to a test map created by one of our developers that shows how you could create a keyboard accessible map that speaks popup content. I think this might work well for a map with a small number of features.

Finally it might be worth contacting your Esri account rep. They may have other customers who have been audited and can possibly share info with you based on those experiences.

[Kathleen_Crombez]

I am not able to use tabindex to set focus on the map.

Has anyone been able to get this to work?

I would really like to see a working example if it can be done.

No matter what I tried, the map navigation keyboard shortcuts only seems to work when the mouse is hovering over the map.

My work around solution was to set the map slider to false and create my own custom zoom and pan buttons.

[AlisonSizer]

I ran across this same problem today (two years after the original question -- sorry!), so hopefully my workaround will help others in the future.

This solution is only for people who are comfortable using undocumented functions that were meant to be internal (ones that start with underscore), with the understanding that this isn't officially supported, and that the behavior of these functions may change in the future (and may not be backwards-compatible with older versions of the jsapi).

This will force the map to think the mouse is over it, and attach the requisite key press listeners:

map.navigationManager.mouseEvents._onMouseEnterHandler(new Event('mouseenter'));

And this will detach those listeners (it's up to you to decide when/how to do this -- maybe by capturing a tab keypress):

map.navigationManager.mouseEvents._onMouseLeaveHandler(new Event('mouseleave'));

Hope this helps!

PS I haven't verified this in all browsers -- just Mac Chrome.

[KellyHutchins]

If you are using 4.x I have a 'work in progress' app here that allows you to tab into the map then use the arrow keys to navigate the map. As you navigate the map a box will draw and you'll see options for viewing info about the features within that area. 

GitHub - kellyhutchins/a11y-map: A11y map testing 

[Kathleen_Crombez]

This is pretty nice Kelly. Thank you for sharing!

I will need to look at it more closely when I have time.

Is there an option to select a feature and get more information about it?

or is all the information read from the bottom information area?

also, it seems to have issues in chrome with chrome vox running.

I hope you guys eventually add standard functionality like this in the map object of the javascript api in the future...

[DavidBlanchard]

I have an old project where I built an accessible map including clicking on the map using the keyboard.

The gist of our approach was:

• If a user uses the tab key to focus the map, we activate a special mode that includes
  • Instructions on using the keyboard to navigate the map
  • A cross-hair that serves as the click location (activated via enter key)
  • We deactivate the default keyboard map panning and wrote our own functions to avoid the necessity of having the mouse over the map.
• Non-sighted users were accommodated by providing a search bar as an alternative to the map. The map itself is hidden (using aria-hidden) and the popup content is captured and displayed outside the map. This allows screen readers to get access to the popup content.

Links to a demo and the code are below (this was experimental and is no longer maintained, so not everything works):

Demo: http://apps.esri.ca/CanadianMunicipalities/MunicipalServices/ 

Code: GitHub - EsriCanada/municipal-government-services

[KellyHutchins]

Can you provide info about the issues with Chrome Vox? I'll setup a test but wanted to make sure I investigate the issue you are seeing. 

Thanks

Kelly

[Kathleen_Crombez]

Kelly,

When Chrome Vox is enabled the box in the center of the screen does not show up and the map flickers and dances around.

At least that is what I was experiencing.

Google Chrome Version 59.0.3071.115 (Official Build) (64-bit)

Chrome Vox Version 53.0.2784.5

I have not modified any of the settings.

All the setting are set to the default.

Thanks,

Kathleen

[KellyHutchins]

I just tested with ChromeVox and can repro the issue. Tested with Voice Over on my mac and it worked fine. Also noticed a few issues with Jaws so I'll see if I can address those later today and hopefully fixing those issues will also resolve the problems in ChromeVox.