Making the Web Work for People with Disabilities

Illinois Department of Innovation & Technology
Office of Information Accessibility

What is accessibility?

Usable by people with disabilities:

  • Low vision, blindness, color blindness
  • Limited use of hands
  • Deafness or hardness of hearing
  • Cognitive or learning disabilities

Compatible with assistive technologies:

  • Screen magnifiers (ZoomText)
  • Screen readers (JAWS, NVDA, VoiceOver)
  • Alternate keyboard & mouse devices
  • Speech recognition (Dragon, WSR)
  • Reading aids (Kurzweil, Read&Write)

Why is accessibility important?

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

ADA.gov U.S. Department of Justice Civil Rights Division March 18, 2022 Guidance on Web Accessibility and the ADA. This guidance describes how state and local governments and businesses open to the public can make sure that their websites are accessible to people with disabilities as required by the Americans with Disabilities Act (ADA). Learn more about businesses' and state and local governments' ADA responsibilities.

ADA Lawsuits: 2314 in 2018,2890 in 2019, 3503 in 2020, 4011 in 2021, 455 estimated by the end of 2022. (From UsableNet.com)

How do we make web sites accessible?

Testing

  • Automated Testing
  • "Quick Tests"
  • Assistive Technologies

Automated Testing

For example:

But...

  • No software can test everything
  • Accessibility requires manual tests
  • You need to recognize when they makes mistakes...

Disclaimers

  • "The absence of errors DOES NOT mean your page is accessible or compliant."
  • "We never indicate that your page is accessible or if it has 'passed'."
  • "Only a human can determine true accessibility."

"World's Least Accessible Web Page"

  • 13 automated testing tools vs. 142 errors
  • Best: 40%
  • Worst: 17%
  • None: 29%

UK Government Digital Service Accessibility Tools Audit

"Quick Tests"

Visual

  1. Turn on High Contrast (Alt + Shift + Print Screen) & Zoom to 200%
  2. Check that nothing important disappears
  3. Turn off High Contrast
  4. Use the Colour Contrast Analyzer 

Keyboard

  1. "Tab" through links, form fields, custom controls
  2. Check that:
    • All interactive elements receive visible focus
    • Focus moves between elements in a logical order, and
    • All elements can be operated using standard keyboard commands.
  3. Plus: "Skip to Main Content"

Assistive Technology

Be careful!

  • Using a screen reader is very different
  • Put down the mouse, turn off your monitor
  • "Cheating" invalidates your tests (and wastes everyone's time...)

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!