Accessible Web Mapping Apps

  • Kelly Hutchins
  • Tao Zhang
## What is accessibility

Make content usable for everyone regardless of abilities.

Wide range of disabilities

A wide range of disabilities: permanent, temporary, and situational
## 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?


Web Content Accessibility Guidelines

Screenshots of WCAG 2.0 and 2.1 official docs
## 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

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

Example of white text on light colored background
Example of white text on dark 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]( - Review color contrast issues reported by automated test tool ([aXe](
## Text alternatives [WCAG 1.1.1]( 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

Example of a static 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


Screenshot of Esri Canada's accessible basic viewer template

GitHub repo:

Accessible map prototype

Screenshot of an accessible map prototype with a bounding box and features inside the box.

GitHub repo:

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

Automated test with aXe

Screenshot of aXe extension in Chrome
  • 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]( - [A11ycasts: NVDA](
## 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]( - [Google Developers Web Fundamentals: Accessibility]( - [The A11Y Project]( - [GeoNet: Accessibility](
## Questions? Link to slides: [](