esri / a11y-map

A11y map testing

a11y-map

A prototype app to test adding keyboard interaction (similar to Google's a11y behavior)with Esri's ArcGIS API for JavaScript version 4.

View it live

Features

To see the a11y features tab into the map and you'll see that a megaphone icon is visible. Once you activate this icon you'll see an extent graphic and feature list are added to the map to allow users to navigate the map content via the keyboard.

• Use the arrow keys to move around the map
• Use the +/- keys to zoom in and out of the map
• To learn more about one of the features wihin the selection box press the associated number key.
• To learn more about the direction the box is moving and current location press the i button

Default Map Navigation

This application uses version 4.x of the ArcGIS API for JavaScript which supports the following keyboard navigation for maps.

Action	Map behavior
Arrow Keys	Nudge the map to the left, right, up or down
N	Adjust the map to point North
A	Rotate the map counterclockwise
D	Rotate the map clockwise
+	Incrementally zoom in at the center of the map
-	Incrementally zoom out at the center of the map

At this point this is just a prototype app and feedback and comments are greatly appreciated.

You can access a live version of the app for testing here. The live test app supports a web map url parameter so you can append ?webmap= to the url to test with various web maps. The app requires that the map has a feature layer as the first layer and it uses the first string field it finds as the display field.

Another interesting app that shows navigating content in an accessible manner is Patrick Arlt's demo app available here. Accessible Search

Instructions

To see the a11y features tab into the map and you'll see that a megaphone icon is visible. Once you activate this icon you'll see an extent graphic and feature list are added to the map to allow users to navigate the map content via the keyboard. Once in the map you can use the arrow keys to move right, left, up or down in the map. Use - to zoom in and + to zoom out. While the location dialog is active press i for more details about the area. Under the hood pressing i does a reverse geocode to find the address for the center of the query box. Alternatively you can use the Search box to search for a location and then navigate the map via the drawn box on the map.

Installation

1. Install node and npm
2. Open a command prompt and navigate to the folder where you've copied the a11y-map files
3. Run npm install

Requirements

• Your favorite IDE
• Web browser with access to the Internet

Resources

• ArcGIS for JavaScript API Resource Center

Issues

Find a bug or want to request a new feature? Please let us know by submitting an issue.

Contributing

Esri welcomes contributions from anyone and everyone. Please see our guidelines for contributing.

Licensing

Copyright 2018 Esri

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

A copy of the license is available in the repository's license.txt file.

a11y-map's Issues

Add option to limit navigation area

Limit map navigation to the area where results are located. As a temporary 'fix' I added a listener for the 'h' key that moves the map back to the initial loading location when pressed.

See original at: kellyhutchins/a11y-map#11

Add map scale info to live region

see original at: kellyhutchins/a11y-map#10

Add hotkey to navigate between data points / polygons

Steps to reproduce:

• go to /a11y-map/index.html
• navigate with keyboard to area with pop-ups
• enter a pop-up

Expected result:

• press [INSERT KEY HERE] to transfer to next data point (potentially ordered by legend?)
• current pop-up is closed and map moves to new point
• New pop-up is opened and read into live region
• Add feature to read current map position on close of pop-ups

Context:
In current format, a user with a visual impairment may be unable to navigate between data points in a orderly format, or unable to visit all data points without context of where they are.

---

See original at: kellyhutchins/a11y-map#17

Should live-region read anything for pop-ups?

A11y with Esri widgets

Hi all,

This is super cool, good work!

I was wondering how you might make some of the widgets accessible, for example the Sketch widget, or if you were using SketchViewModel to make a custom draw tool? I can't figure out how you might make this keyboard accessible! Does anyone have any ideas?

Thanks in advance!

Alex

Unable to run locally

I tried to run the repo locally on both Windows 10 and Mac OS, and have been unable to set it up successfully. I am new to the Node scene, so I'm not sure how to fix it.

Discovered issues:

• I noticed there is a conflict with the package-lock.json file. If I delete that file and the node_modules folder once I run npm install it runs and the setup is added in without vulnerabilities.

Some possibilities:

• I'm guessing there is either a dependency and/or file missing to package everything up together to serve it up.
• Possibly another step is needed in the installation setup instructions?

Assistive technology testing

Hi all,

Thank you all for creating such an awesome map and working diligently to provide an accessible map option to the mapping community! 🗺️

Some colleagues at my organization had a few questions regarding the testing you've been able to conduct, and are wondering if you have been able to test some of the items below, including:

1. Has there been testing with text-to-speech software? 📢

2. Does the "speech" button (that appears when a user tabs into the app) that triggers audio interfere with screen reader assistive technology? 🗣️

3. Do the keyboard navigation buttons (←, ↑, →, and ↓) interfere with the screen reader keyboard commands? ⌨️

4. Are the popups keyboard accessible once a screen reader is running and the screen reader takes over the keyboard? 🔔

Thank you for your hard work on this project!! 💪

Best,
Kitty

Button to enable keyboard navigation should not have `role="main"`

The button to enable keyboard navigation has role="main" which I don't think is an appropriate role for a button.

ARIA `role="application"`

Currently, the prototype map is assigned role="application", while I haven't invested enough time into understanding all the implications of this particular ARIA role, I know that its use is generally discouraged, here's a few articles that you might find helpful:

• https://terrillthompson.com/20
• https://marcozehe.de/2012/02/06/if-you-use-the-wai-aria-role-application-please-do-so-wisely/
• https://tink.uk/using-the-aria-application-role/

There's also a proposed axe rule to warn developers when the role is used in certain contexts: dequelabs/axe-core#1191.

Have there been any testing done with screen readers to ensure it works as users expect?

Avoid using both `title` and `aria-label` with the same value

There's an issue with NVDA (at least) that causes double speak due to identical values in title and aria-label: nvaccess/nvda#7841.

This is currently an issue mostly present in buttons within popups. Conveniently these buttons have child aria-hidden="true" spans for the icons which the title could be moved to (to preserve the native tooltip-on-hover effect), as such only aria-label would be available to ATs and the double speak bug avoided.

Aria live regions: Add two regions one for features and one for directions

Work on aria live settings so both nav info and feature info is spoken.

See original at kellyhutchins/a11y-map#3

Search: Focus popup when search happens

See original at: kellyhutchins/a11y-map#12

Switch to toggle button for enabling/disabling a11y rectangle

Add hotkey to navigate active window to nearest data point/polygon

Steps to reproduce:

• go to /a11y-map/index.html
• navigate with keyboard to area without pop-ups

Expected result:

• press [INSERT KEY HERE] to move window to nearest data point
• movements should be read into the live region to give user context on where they are being moved
• finished with end result read into live region

Context:
In current format, a user with a visual impairment may be unable to navigate to an initial datapoint

---

See original at: kellyhutchins/a11y-map#16

a11y-map prototype app for JavaScript API Version 3.x

The existing a11y-map prototype app to test adding keyboard interaction (similar to Google's a11y behavior) with Esri's ArcGIS API for JavaScript developed using version 4, is it possible to develop the prototype app for JavaScript API version 3.x.

In terms of development:

• would it involve a lot of customization?
• is it possible on providing the sample prototype for the following version requested?

ESC key should exit pop-ups

Steps to reproduce:

• go to /a11y-map/index.html
• navigate area to pop-up
• open pop-up
• press 'esc'

Expected Behavior:

• should close the pop-up

Supporting Info:

• Google Chrome Version 68.0.3440.106
• OS X High Sierra
• localhost..././a11y-map/index.html

---

See original at: kellyhutchins/a11y-map#14

Accessible map template requires legend to be shown

Expected Behavior:
Legend should be active and displayed on map open.

Context:
For users with visual impairments, a legend provides a meaningful way to navigate data outside of using the map. Also when legend information is ordered or sorted by the data it is portraying (ex. regions ordered by population density), it provides clearer context to the significance of the data and the relationship between data points.

---

See original at: kellyhutchins/a11y-map#18

Usage feedback from visually impaired IT specialist

Test each of these issues

• Number needs to be pressed at least twice before the info about that number is displayed
• As numbers appear the screen reader starts reading. If there are a large number the screen reader reads the list at least twice each tie assigning a different number to the landmarks. Only the number assigned after the last reading is correct and leads to the correct description.
• It seems as though you can go to the next and previous points after you select one, but I am not clear on what keystrokes you need to press to do this. After a point is described I do not hear references to next, previous and menu
• In order to move on the map the arrow keys are pressed repeatedly which interrupts the screen reader quite often, causing the user to possibly miss important announcements. Mainly whether there is a point on the map that may have more information. It would be useful if the computer can emit a tone to indicate that points of interest popped up on the map?

See original at: kellyhutchins/a11y-map#9

East/west travel on keyboard is interrupted when VoiceOver Live Region active

Steps to reproduce:

• go to /a11y-map/index.html
• navigate with keyboard to area over pop-ups
  • I went 7 arrows west, then 5 arrows south from the starting position to sit over a region of three pop-ups
• turn on VoiceOver for OS X (cmd-f5)
• try to rapidly travel east with keyboard (right arrow)

Expected result:

• Travels east

Context:
Initial assumption is that the ARIA Live Region is taking priority over the JS to move the map east and west. This doesn't happen with north and south though.

Supporting Info:

• Google Chrome Version 68.0.3440.106
• OS X High Sierra
• localhost..././a11y-map/index.html

---

See original at: kellyhutchins/a11y-map#15

Mobile support

@jimmieego : Jun 14
We need to check if the demo app and its pattern work on mobile devices. I will report any findings here.

---

@jimmieego : Jul 19
Tested VoiceOver in iOS with the prototype and the web version of Google Map:

• VoiceOver uses the swipe left/right to move focus forward/backward, which is equivalent to Tab/Shift+Tab on desktop. So I cannot use one finger to drag and pan the map.
• With VoiceOver running, I cannot set focus to the map.
• With VoiceOver running, I cannot use two finger pinch gesture to zoom in/out the map (note this is different from zooming in/out of the whole screen). I can set focus to the zoom controls in the prototype and then zoom in/out the map, but there is no feedback of the current zoom level.

With the zooming and panning, a workaround is to temporarily disable VoiceOver and then do the normal zooming or panning, and enable VoiceOver again.

In Settings > General > Accessibility, scroll all the way down to Accessibility Shortcut, turn on the Switch Control and VoiceOver. This will allow you to triple click the Home button to show a quick menu to toggle VoiceOver on or off.

---

@jimmieego : Jul 19
Also a short video on how to use VoiceOver in iOS: https://youtu.be/bCHpdjvxBws

---

See original at: kellyhutchins/a11y-map#13

ARIA Live Regions: Zoom level

I believe it'd be beneficial to the user if the zoom level was announced in conjunction to cardinal directions.