Maps & Charts: Making Visual Interfaces AccessibleKlara Schmitt

• WCAG = Web Content Accessibility Guidelines- 2008: W3C publishes WCAG 2.0- 2010: Adopted by ISO as Int’l Standard

• Section 508 = Federal Government Standard- 1998: Established- 2017: Revised Rule Published

• ADA = Americans with Disabilities Act- Dept. of Justice ruled that Title III includes websites

WCAG vs. Section 508 vs. ADA

Revised Section 508 includes:Top to Bottom: Asana, Issuu, Twiter

• Web Software + Mobile- Web apps, LMS,

project management software- Websites, web pages, blogs

• Digital Content

- Electronic documents- .doc, .pdf, .xls, etc

- Agency communications- Social media- Intranet

From the Department of Justice

The Department first articulated its interpretation that the ADA applies to public accommodations’ websites over 20 years ago. This interpretation is consistent with the ADA’s title III requirement that the goods, services, privileges, or activities provided by places of public accommodation be equally accessible to people with disabilities.

...the Department has consistently taken the position that the absence of a specific regulation does not serve as a basis for noncompliance with a statute’s requirements.

20% of Americans are d/Deaf or hard of hearing.

That’s 48 million Americans.

- World Health Organization

10% of all adult Americans have some degree of vision loss.

That’s 23.7 mullion American adults age 18+.

- World Health Organization

Photo Credit: Luis Miguel Justino

Maps

• 1.4.1 Use of Color- Color is not used as the only visual means of conveying information, indicating an action,

prompting a response, or distinguishing a visual element. (Level A)

• 1.4.3 Contrast (Minimum)- The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except

for the following: large text, incidental, logotypes. (Level AA)

• 1.4.5 Images of Text- If the technologies being used can achieve the visual presentation, text is used to convey

information rather than images of text. (Level AA)

• 1.4.11 Contrast (Minimum)- The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent

color(s): User Interface Components, Graphical Objects. (Level AA)

WCAG Guidelines

<img src=“religious-divserity-map.jpg” alt=”Map of religious diversity using simpson’sindex to show likelihood of 2 individuals in same county belonging to different religious groups” />

<img src=“religious-divserity-map.jpg” alt=”Map of religious diversity using simpson’sindex to show likelihood of 2 individuals in same county belonging to different religious groups” longdesc=“#moreInfo” aria-describedby=“#moreInfo” />

<p id=“moreInfo”>The analyzed groups included Latter-day Saints, Catholicism, Protestantism, Islam, Judaism, other Christians, and other religions. The high proportion of Protestants in the central states and the high proportion of Latter-day Saints in the mountain west create areas of low religious diversity.</p>

https://community.esri.com/groups/accessibility/blog/2018/07/19/making-an-accessible-pdf

Tools• WCAG Chrome Extension

• WebAIM.org

• Color Oracle

• Color Brewer

• Tab moves forward

• Shift + Tab moves backward

• These keys only jump between links & form elements

• Space = select form elements

• Enter = select links

Keyboard Nav

• Ctrl + Option = VO keys

• VO + Shift = enter into page groups

• VO + arrows = navigating entire page

• Space = select form elements

• Enter = selects links

VoiceOver Nav

• Insert = NVDA key

• Same tab and shift/tab functionality as keyboard

• Same form control keys as keyboard

NVDA Nav

JSAPI 4 a11y Prototype

DEMO in Safari

Charts

• Use a hidden table for screen readers

• Use aria-labels or aria-labelledby to support SVGs

• Use <summary> if possible (easier for static charts)

• Support keyboard navigation

Accessible Charts

Q&AContact Us: Section508@esri.com

• Slides available at https://www.slideshare.net/KlaraSchmitt/maps-charts-making-visual-interfaces-accessible

• 1.3.1 Info and Relationships- Information, structure, and relationships conveyed through presentation can be programmatically

determined or are available in text. (Level A)

• 1.3.3 Sensory Characteristics- Sensory Characteristics: Instructions provided for understanding and operating content do not rely

solely on sensory characteristics of components such as shape, size, visual location, orientation, or sound. (Level A)

• 2.1.1 Keyboard- All functionality of the content is operable through a keyboard interface without requiring specific

timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints. (Level A)

WCAG Guidelines