Viewing Notes

How to see this presentation

Some hotkeys:

  • Arrow keys to navigate (slide on touch devices)
  • H = highlight any code snippets
  • P = toggle speaker notes (if any)
  • F = fullscreen viewing
  • W = toggle widescreen
  • ESC = toggles off these goodies

Who am I?

Photo: Joe Dolson

  • An advocate and consultant on web accessibility
  • A writer and speaker on pragmatic accessibility
  •

What is accessibility on the web?

Web accessibility is mostly about creating interface independence

None of these should be required on a web site:

  • Keyboards
  • Mice
  • Monitors
  • Desktop computers

What is the reality of web accessibility?

Accessibility on the web is a wild and wooly place:

  • Mostly unprotected by law
  • Different solutions for different disabilities
  • Filled with contradictory and confusing information

What is Pragmatic Accessibility?

  • Pragmatism is not perfection.
  • Pragmatism asks for continuous improvement.
  • Pragmatism works from principles, not techniques.
  • Lack of accessibility is not a reason to keep information off the web.

Principles of Accessibility

The Web Content Accessibility Guidelines, v.2, are based on four guiding principles:

  • Perceivable
  • Operable
  • Understandable
  • Robust

Who benefits from web accessibility?

  • Blind or partially sighted users.
  • Deaf and Hard of Hearing users.
  • Color blind users.
  • Users with cognitive impairments.
  • Users with mobility impairments.

Who else benefits from web accessibility?

  • Users of smart phones and tablets.
  • Users in brightly lit rooms.
  • Impatient users.
  • You. Me.

Barriers to Moving Forward

  • Art vs. Accessibility
  • Building Empathy
  • Knowledge and Understanding
  • Time & Money

The Art of Accessibility

  • Popular design trends don’t lock step with usability:
    • Color choice
    • Button design
    • To underline or not to underline?
  • Accessible design is a communication art
  • Accessibility requires great visual thinking…
  • …and the ability to translate visual into machine-readable

Building Empathy

Experience and Observation

Building Knowledge

Know your Accessibility Stakeholders

  • Content creators
  • Designers
  • Programmers
  • Decision makers

What a Content Creator Needs to Know

  • Skimmable content
  • Meaningful link text
  • Avoiding color or locationally driven text
  • Clear language
  • Careful use of acronyms and abbreviations
  • Alternate content for images, audio, or video
  • Use all-CAPS carefully.

Designer/Developer Knowledge Base

  • Color contrast (
  • Heading structure
  • Reading order
  • Avoid images of text.
  • Use adequate font sizes (10pt plus)
  • Consider line length
  • Make links recognizable; consider link focus
  • Label form fields and controls clearly.

What Decision Makers Need to Know

  • Can we afford to do accessibility later?
  • How do you do a quick accessibility test?
  • What does an accessibility test actually tell you?

How to separate the good from the bad

Good advice is:

  • Aware of context
  • Considers multiple forms of disability
  • Realizes that solutions have complex ramifications.

Bad advice is likely to be absolutist or reductionist.

How does AT Work?

First, understand how you work with the web


  • You jump from navigation, to headings, and back to content.
  • You scan through the document, looking for information.
  • You quickly click from field to field in a form, reading instructions as you go.

Screen Readers are linear

  • Navigation, then body.
  • Heading then section.
  • Line to line.

HTML code is written in a specific order, and the screen reader must follow that.


Screen Readers Are Smart

  • Navigation by HTML headings
  • Navigation by ARIA regions
  • Navigation by links


Not that smart.

  • Images are unreadable information
  • How do I fill out this form?
  • Where is the “left” side of the page?

How about other Assistive Technology?

Voice Control

  • Hidden labels = big challenges.
  • Voice commands need to be unambiguous.
  • Don’t make actions keyboard dependent!

Screen enlarging & High Contrast Mode

  • Tunnel vision = context challenges.
  • Background images have content? Goodbye, content.

Well, darn. How do I test this?

5 Quick Accessibility Tests

  • Unplug your mouse
  • Turn off images
  • Check for captions & transcripts
  • Check your labeling — ( )
  • Click here?

Web Accessibility with WAVE

WAVE is a product from WebAIM, out of Utah State University and the Center for People with Disabilities

Example 1

Example 2

Accessibility Resources

WCAG Recommended Techniques: highly technical, though simpler than the WCAG itself.

WebAIM: Simplified summaries, recommendations. Extensive documentation on almost every accessibility topic:

University of Minnesota, Duluth Web Design References: Extensive curated catalog of accessibility articles on the web: