Talk to Me
Making websites accessible
Jörn Zaefferer
http://bassistance.de
@bassistance
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...
5. It's the Law. Or will be.
UN Convention on the Rights of Persons with Disabilities
Ratified in Poland on 25 Sep 2012.
6. It's the right thing to do.
Golden Rule: "One should treat others as one would like others to treat oneself."
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
Testing Basics
How to test?
W3C Validator, Keyboard Testing, Screenreader Testing
Keyboard Testing
Put away the mouse, use tab key to navigate, try links, buttons, forms
Markup for links and buttons
Markup for content
Markup for forms
Testing Screenreaders
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!
WAI-ARIA
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
- ...
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
Support the jQuery Foundation at jquery.org
Ask for forgiveness, not permission
Convince the boss. Test keyboard and screenreader. Fix by hand or use frameworks.
That's all. Thanks for listening.
If we have time, please ask questions!
Resource links: https://github.com/jzaefferer/talk-to-me
Slides at http://jzaefferer.github.com/talk-to-me/