Accessible Web Mapping Apps

Kelly Hutchins
Tao Zhang

## What is accessibility

Make content usable for everyone regardless of abilities.

Wide range of disabilities

## Why is accessibility important? - The ADA and Section 508 - People with different abilities should have equal access - Good accessibility is good user experience

How is Esri doing?

Reviewing products for compliance
Voluntary Product Accessibility Templates (VPATs)
Fixing accessibility issues
Building accessible components, features, and apps
Sharing knowledge and best practices

## WCAG

Web Content Accessibility Guidelines

## What we will cover today - Focus and keyboard accessibility - Color and color contrast - Text alternatives - Map for non-sighted users - Test for accessibility

Focus and keyboard accessibility

WCAG 2.4.7: Interactive elements should have clear focus.
WCAG 1.3.2: Navigation (tab) order should be logical and intuitive.
WCAG 2.1.1: Keyboard users should be able to use functionalities using keyboard only.
WCAG 2.1.2: Content does not "trap" keyboard focus within subsections.

Demo: Focus and tab order

Demo: Focus trap in dialog

Example: Accessible App of Electric Charging Stations

Default map navigation

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

https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html

## Test focus and tab order - Tab through page to verify all interactive elements have focus - Focus order matches intended reading order - Interact with all links and controls using only keyboard - No keyboard trap except for modals - Off-screen/invisible content should not receive focus

Color and color contrast

WCAG 1.4.1: Color is not the only visual means of conveying information.
WCAG 1.4.3: Text needs to have contrast ratio of at least 4.5:1.

Demo: Color and color contrast

Color ramp

Use Color Oracle to simulate color blindness

Color ramp

Use Color Brewer to select colorblind safe colors

White text on colored background

Flipping the contrast

Example of black text on light colored background

## Test color and color contrast - Look for content differentiated by color only - Use a [contrast ratio calculator](https://contrast-ratio.com/) - Review color contrast issues reported by automated test tool ([aXe](https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd))

## Text alternatives [WCAG 1.1.1](https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html): Non-text content has text alternative.

If an image conveys meaning, write effective alternate text.

If an image is decorative, use alt="".

Example of descriptive alt text

Example of empty alt text

## Write effective alternate text - Think about how users will be doing with the information - Be accurate in presenting the content in images - Be succinct - No need to use the phrase "image of ..." to describe images

## Map for non-sighted users

Display a text description of the map

"The Esri Olympia regional office is located at 111 Market St NE Suite 250 across the street from the Farmer's Market."

Provide data in an alternate format

Example: Zone Lookup without map
Example: Zone Lookup with map

WCAG-BasicViewer

Screenshot of Esri Canada's accessible basic viewer template

GitHub repo: https://github.com/EsriCanada/WCAG-BasicViewer

Accessible map prototype

GitHub repo: https://github.com/Esri/a11y-map

## Test for accessibility 1. Automated test 2. Keyboard test 3. Screen reader test 4. Color test

Automated test with aXe

Tests rendered page in browser
Less false positives
Accessible

Demo: Automated test using aXe

Keyboard test

Key	Action
Tab, Shift + Tab	Move keyboard focus
Enter	Click links
Enter, Space	Click buttons
Arrow keys	Move within menus, tabs, radio buttons

Screen reader

OS	Screen reader	Browser
MacOS	VoiceOver	Safari
Windows	NVDA	Firefox
Windows	JAWS	IE/Edge

## Screen reader basics - [A11ycasts: VoiceOver](https://youtu.be/5R-6WvAihms) - [A11ycasts: NVDA](https://youtu.be/Jao3s_CwdRU)

## Color test - Automated color contrast test results may need manual verification - Look for information differentiated only by color

## What we covered today - Focus and keyboard accessibility - Color and color contrast - Text alternatives - Map for non-sighted users - Test for accessibility

## Additional resources - [MDN: Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility) - [Google Developers Web Fundamentals: Accessibility](https://developers.google.com/web/fundamentals/accessibility/) - [The A11Y Project](https://a11yproject.com/) - [GeoNet: Accessibility](https://community.esri.com/groups/accessibility)

## Questions? Link to slides: [https://arcg.is/1jGXS5](https://arcg.is/1jGXS5)