Follow along at bit.ly/NYCDIG317
Build Your Accessibility Evaluation Toolkit
NYC Digital - Digital Inclusion & Accessibility 2018 | May 17, 2018
Learn which tools to use to test and evaluate your digital products and content. Explore a set of accessibility evaluation tools for different use cases, e.g. plain language (Hemingway App), color contrast (Color Contrast Checker), general accessibility audit tools (Chrome Accessibility Audit, aXe, and WAVE)—including when and how to use each.
Introduction
.png)
Thomas Logan | Accessibility Consultant
thomas@equalentry.com | LinkedIn | @techthomas
Equal Entry is providing free trial access to our Knowledge Base for 30 days to all NYC employees interested in expanding their knowledge of accessibility. The Knowledge Base contains tips, videos, and other tools to help make your technology accessible.
Writing with Plain Language (Content Authors)
- INFO: Plain Language Guidelines
- TOOL: Hemingway App
- DEMO: Plain Language Examples: Before and After
- DEMO: Funghi Hazards
- INFO: Writing Government Information for People with Disabilities
- Cut and paste your text into Hemingway
- Check the Readability Grade your content received
- Use Lists, Tables, and Headings to provide structure and simplify text
Evaluating Color Contrast (Designers)
- INFO: Contrast (Minimum)
- TOOL: Colour Contrast Analyzer
- DEMO: Color Palette
- DEMO: Color Contrast Study
- EEKB: Testing Content for Color Contrast Compliance
- Ensure 3:1 contrast for headings and other large text
- Ensure 4.5:1 contrast for all other usages of text
- Create a style guide and consistently use themes with strong contrast
Automatic Tests with aXe (Developers)
- TOOL: aXe Toolbar
- DEMO: U.S. Environmental Protection Agency Homepage
- EEKB: Testing Content with aXe Toolbar
- Address all Violations Found by fixing in code, or logging issue with developer
Inspecting Accessibility with WAVE (Content Authors)
- View page with No Styles selected
- Look to see if content becomes difficult to understand due to ordering
- View the Outline of your page
- Confirm headings are logical and labels are useful
- View details of issues found
Testing with the Keyboard (Everyone)
- DEMO: Google Maps of Accessible Pedestrian Signals
- DEMO: Custom Map of Accessible Pedestrian Signals
- BUG: Feature Request - Accessibility of Google Maps
- Press ⌘ or CTRL + L to go to address bar
- Press Tab to move to next element
- Use ←,→,↓ or ↑ to move between items in groups
- Press ENTER to show new UI such as menu opening
- Verify focus moves to logical next element
- Press ESC to return to element
- Verify every action can be achieved with keyboard
- Verify a visible focus rectangle is displayed around each element