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

Thomas Logan headshot Thomas Logan | Accessibility Consultant

[email protected] | LinkedIn | @techthomas

Equal Entry

Accessibility New York City

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.
Register for Knowledge Base

Writing with Plain Language (Content Authors)

  1. Cut and paste your text into Hemingway
  2. Check the Readability Grade your content received
  3. Use Lists, Tables, and Headings to provide structure and simplify text

Evaluating Color Contrast (Designers)

  1. Ensure 3:1 contrast for headings and other large text
  2. Ensure 4.5:1 contrast for all other usages of text
  3. Create a style guide and consistently use themes with strong contrast

Automatic Tests with aXe (Developers)

  1. Address all Violations Found by fixing in code, or logging issue with developer

Inspecting Accessibility with WAVE (Content Authors)

  1. View page with No Styles selected
  2. Look to see if content becomes difficult to understand due to ordering
  3. View the Outline of your page
  4. Confirm headings are logical and labels are useful
  5. View details of issues found

Testing with the Keyboard (Everyone)

  1. Press or CTRL + L to go to address bar
  2. Press Tab to move to next element
  3. Use ,, or to move between items in groups
  4. Press ENTER to show new UI such as menu opening
  5. Verify focus moves to logical next element
  6. Press ESC to return to element
  7. Verify every action can be achieved with keyboard
  8. Verify a visible focus rectangle is displayed around each element

Screen Reader Tests (Developers)

Additional Tools

References