Accessibility Testing for Developers

Accommodating People with Disabilities

• Low vision, blindness, color blindness
• Limited manipulation
• Deaf or hard of hearing
• Cognitive or learning disabled

Compatibility with Assistive Technologies

• Screen Magnifiers
• Screen Readers
• Alternate Keyboard & Mouse Devices
• Speech Recognition
• Reading Aids

Your Users

• 10-20% of Illinoisans have or will have a disability
• An aging population has increasing accessibility needs
• Accessibility, usability, and mobility often go hand-in-hand

The Law

• Americans with Disabilities Act
• Section 508 of the Rehabilitation Act
• Illinois Information Technology Accessibility Act (IITAA)

The Lawsuits

• National Federation of the Blind
• Department of Justice Office of Civil Rights
• Drive-bys...

Accessibility Standards

• Section 508
• Web Content Accessibility Guidelines (WCAG)
• Accessible Rich Internet Applications (ARIA)
• Illinois Information Technology Accessibility Act (IITAA)

What's new with accessibility standards?

• Section 508 Refresh & IITAA Update - effective Jan 18, 2018
• ARIA & ARIA Authoring Practices 1.1 - effective Dec 2017
• WCAG 2.1 - effective June 5, 2018

WCAG 2.1???

• 17 new Success Criteria (12 A & AA)
• Backward compatible
• Mobile devices, low vision & cognitive disabilities
• Don't worry about it (yet...)

Common Principles

• Code - Use HTML for semantics & structure
• Color - Use contrasting colors & don't use color alone
• Alt Text - Provide text alternatives for non-text content
• Labels - Label interactive elements
• Keyboard - Ensure keyboard operability

Accessibility Testing

• Automated Testing
• "Quick Tests"
• Assistive Technologies

Know the limitations of automatic testing:

• All require manual tests
• Some don't test what you think (e.g. DHTML Test)
• You need to be able to recognize when it makes mistakes

World's Least Accessible Web Page

• 142 errors
• 12 tools
  • Best: 40%
  • Worst: 17%
  • None: 29%

Online Testers

• WAVE
• FAE
• Tenon
• HTML CodeSniffer

Downloadable Tools

• WAT (IE)
• WAVE (Chrome, FF)
• Web Developer (Chrome, FF)
• DevTools (Chrome)

Integrated Tools

• Visual Studio Web Accessibility Checker
• aXe-core
• Pa11y
• Siteimprove

Common Principles

• Code
• Colors
• Alt Text
• Labels
• Keyboard

Quick Test: Code

1. Disable Styles
2. Check that:
   • Section headings are large & bold
   • Lists have bullets or numbers
   • Order is correct

Quick Test: Colors

1. Turn on High Contrast
2. Check that:
   • Text changes color
   • Nothing important disappears
3. Use the Colour Contrast Analyzer 
   on each text/background combination

Quick Test: Alt Text

1. Disable Images
2. Check that:
   • images of words show the same words
   • image links identify their destination
   • decorative images don't have alt text

Quick Test: Labels

1. Click on each form field label
2. Check that:
   • focus moves to the field, or
   • the field has a tooltip that serves as a label, or
   • ARIA....

Quick Test: Keyboard

1. "Tab" through links, form fields, custom controls
2. Check that:
   • All interface elements receive focus
   • Tab order is logical
   • Link text is understandable
   • Custom controls are operable

IITAA Testing Checklist

• Tests all IITAA (& 508 & WCAG) Criteria
• Uses WAT & JAWS
• Download from http://www.dhs.state.il.us/accessibility/references/iitaa-testing-checklist.html

Top Screen Readers

1. JAWS + IE 11
2. NVDA + Firefox
3. VoiceOver + Safari (mobile!)

• Know how your assistive technology works
• Know how your assistive technology works
• Know how your assistive technology works

Keys to Success

• Test early! (during prototyping, when picking libraries...)
• Know what your tools can/can't do! (manual checks, false positives)
• Know when to ask for help!

What's Next?

• Additional trainings?
• .NET Competency Group
• UI Competency Group

• dhs.illinois.gov/iitaa
• dhs.accessibility@illinois.gov