Web Accessibility 101

Making the Web Work for People with Disabilities

Mike Scott
Illinois Department of Human Services
mike.scott@illinois.gov

Web Accessibility 101

What is accessibility?

Accommodating People with Disabilities

What is assistive technology?

Low Vision or Blindness

Limited Use of Hands

Deaf or Hard of Hearing

Learning Disabilities

Why is accessibility important?

Your Customers, Your Staff, Your Students, Your Self...

The Law

The Lawsuits

Target.com

How do we make web sites accessible?

Accessibility Standards

How do we know if a web site is accessible?

Testing

Quick Test Checklist

Valid HTML
  1. Browse to validator.w3.org
  2. Enter an address and click "Check"
  3. Pass or Fail?
Headings

After validating:

  1. Click "More Options"
  2. Check "Show Outline"
  3. Scroll down to "Document Outline"
  4. Check heading text and order
Large Fonts

In Internet Explorer:

  1. Open "View" menu
  2. Select "Text Size" > "Largest"
  3. Check that text, including in form fields, gets larger
High Contrast

In Windows:

  1. Open Control Panel, Accessibility Options
  2. Select "Display" tab, click "Settings"
  3. Check "Use Shortcut"
  4. Select "High Contrast Black"
  5. Check that text changes color and nothing important disappears
Alternate Text
  1. Hover the mouse over each image
  2. Check that:
    • decorative images don't have alt text
    • images of words show the same words
    • image links identify their destination
Captions
  1. Check that audio recordings have transcripts
  2. Check that videos have captions
Skip Navigation
  1. "Control + Home" to top of page
  2. "Tab" through links
  3. Check for a "skip to content" link near the top
Tab Order & Link Text
  1. "Tab" through all links & form fields
  2. Check that:
    • Order makes sense
    • Link text is understandable
Form Field Labels
  1. Click on each label
  2. Check that focus moves to the field
  3. If a field doesn't have a label,
    hover the mouse pointer and check for a title
Keyboard Operation
  1. Try any special controls (drop-down menus, tabs, etc.)
    using the keyboard.
  2. Check that:
    • You can get to them using the keyboard
    • Nothing unexpected happens
PDF Documents

In Adobe Reader:

  1. "File" > "Save as Text"
  2. Check that:
    • All text is there
    • In the right order
PDF Forms

In Adobe Reader:

  1. Hover the mouse over each form field
  2. Check that a tool tip appears
  3. Tab to each field
  4. Check that it can be operated using the keyboard

Automated Testing

Testing with Assistive Technology

Keys to Success

Who can help?