Talk to Me

Making websites accessible

Jörn Zaefferer


I went outside. I looked at the sky. I heard colors such as “Horizon,” “Outer Space,” and many shades of blue and gray. I spent ten minutes looking at my pumpkin plants, with their leaves of green and lemon-ginger. — Austin Seraphin (36), programmer, blind since birth

What do you "see"?

Convince your boss

Accessibility is important, like user experience and security

1. Boost your user experience

Accessible websites are more usable for everyone

2. Support powerusers

Keyboard access for everyone

3. SEO improvements

Meaningful markup for screenreaders and search engines

4. More customers

When you can't leave home, shopping online is so much more useful.

5. It's the Law.

USA: Section 508, Amendment to the Rehabilitation Act of 1973; Canada: Common Look and Feel Standards 2.0, Standard on Web Accessibility, Accessibility for Ontarians with Disabilities Act, affects large (2014) and small (2015) private organizations; United Kingdom: BS 8878, Web accessibility. Code of practice; Germany: Grundgesetz, Artikel 3, "Niemand darf wegen seiner Behinderung benachteiligt werden.", Behinderten-Gleichstellungs-Gesetz (BGG) and Barrierefreie-Informationstechnik-Verordnung (BITV); and many more...

Convince your boss

Match and mix

  • 1. Boost your user experience
  • 2. Support powerusers
  • 3. SEO improvements
  • 4. More customers
  • 5. It's the Law.

Ask for forgiveness, not permission

How to test?

W3C Validator, Keyboard Testing, Screenreader Testing

Keyboard Testing

Put away the mouse, use tab key to navigate, try links, buttons, forms

Screenshot of Wizzair site with Web Inspector open, showing the lack of href or tabindex

Markup for links and buttons

Markup for content

Markup for forms

Testing Screenreaders

Screenshoft of NVDA site and running in background Screenshot of Universal Access preferences pane, with Safari in the background Screenshot of JAWS site and JAWS running in the foreground

Virtual Cursor

A speaking DOM tree!

Headers, Links, Forms, Landmarks

The GOTO of screenreaders

Specifying landmarks

with roles

Using live regions to announce screen changes

via aria-live and aria-atomic

Using live regions to announce screen changes

Make text changes!


Web Accessibility Initiative - Accessible Rich Internet Applications

  • roles
    • landmarks: banner, main, search...
    • widgets: menu, dialog, grid...
  • states and properties
    • aria-live
    • aria-atomic
    • aria-describedby
    • ...

jQuery UI Logo

accessible widgets, interactions, theming

jQuery UI Menu markup

slighly simplified to fit here

jQuery UI Autocomplete Markup

excluding the menu

Future of ARIA and jQuery UI

more coverage and alignment

jQuery Foundation Logo

Support the jQuery Foundation at

Ask for forgiveness, not permission

Convince the boss. Test keyboard and screenreader. Fix by hand or use frameworks.

Photo of Stephen Hawking with his wheelchair and monitor