A short general introduction to web accessibility. 1/2 hour talk at the Think Visibility Conference in Leeds 6 March 2009

1. Avoiding common
Accessibility mistakes
think visibility 2009
Dirk Ginader
http://ginader.com
http://twitter.com/ginader
Saturday, March 7, 2009

2. You know SEO?
Helps a LOT!
Saturday, March 7, 2009

3. • easily understandable valuable content
• semantically rich markup
• the >right< semantic markup (if you think
you found a wicket cool new use for a
definition list - think again...)
Saturday, March 7, 2009

4. • good “speaking” URLs
• Link-texts that make sense by themselves
• valuable alternative texts on Images
Saturday, March 7, 2009

5. You know Usability?
Accessibility === Usability!
except it’s for everyone...
Saturday, March 7, 2009

6. • use the tab and enter key only
- can you navigate your site?
• disable Javascript
- are you still able to do everything?
• zoom the page in the Browser (yes IE6 too)
does the Layout still work?
Saturday, March 7, 2009

7. • zoom the screen
are you able to realize all the changes?
• close your eyes
...
Saturday, March 7, 2009

8. You know CSS?
Saturday, March 7, 2009

9. • using CSS is great for accessibility - right?
• yeah...
• ... not necessarily
Saturday, March 7, 2009

10. No I will not preach
<table> Layout ;-)
Saturday, March 7, 2009

11. Sorry...
Saturday, March 7, 2009

12. • used in the wrong way CSS can reduce
accessibility
• display:none and visibility:hidden
hide content - also from Screenreaders
• does your hidden content show up
on :focus or only on :hover?
• CSS only Dropdown Navigation is a misuse!
CSS is for design. Javascript is for behavior.
Saturday, March 7, 2009

13. You know Javascript?
Saturday, March 7, 2009

14. • it’s evil - right?
• nope...
• ... not necessarily
Saturday, March 7, 2009

15. • used correctly, Javascript is not only nicely
accessible but can even enhance accessibility
• subtile animations can make otherwise
confusing workflows easier to understand
(subtile! Or motion sickness kicks in...)
• hiding currently unused elements and
highlighting the important ones can make
your layout appear far less complex
Saturday, March 7, 2009

16. • progressively enhance the default non-js
layout and hijack the existing controls to do
their job in the browser instead on the
server
• create new interaction elements, that offer
functionality only available with Javascript,
by Javascript and make sure they are tab-
able
• don’t break the natural tab order by setting
a positive tab index. A tab index of 0 can
make non tab-able elements accessible too!
Saturday, March 7, 2009

17. Screenreaders don’t
understand Javascript
anyway...
Saturday, March 7, 2009

18. • is there still someone believing that?
• most Screenreaders actually handle
Javascript very well!
• they just don’t know if you don’t tell them
Saturday, March 7, 2009

19. • inform Screenreaders about what’s
happening
• a logic and understandable workflow is the
easiest thing to test without a Screenreader
• focus() the next logical element
Saturday, March 7, 2009

20. Examples
Saturday, March 7, 2009

21. without Javascript
http://finance.yahoo.com/currency-converter
Saturday, March 7, 2009

22. without Javascript
http://finance.yahoo.com/currency-converter
Saturday, March 7, 2009

23. without Javascript
http://finance.yahoo.com/currency-converter
Saturday, March 7, 2009

24. with Javascript
http://finance.yahoo.com/currency-converter
Saturday, March 7, 2009

25. with Javascript
http://finance.yahoo.com/currency-converter
Saturday, March 7, 2009

26. with Javascript
http://finance.yahoo.com/currency-converter
Saturday, March 7, 2009

27. http://uk.tv.yahoo.com/
Saturday, March 7, 2009

28. More Examples
• http://icant.co.uk/easy-youtube
• http://blog.ginader.de/archives/2009/02/07/
jQuery-Accessible-Tabs-How-to-make-
tabs-REALLY-accessible.php
• http://www.accessibilitytips.com
Saturday, March 7, 2009

29. For more geeky tech details see you at Geekup Leeds 15.04.2009
http://ginader.com
http://twitter.com/ginader
Saturday, March 7, 2009

30. More Details?
Geekup Leeds
15.04.2009
Saturday, March 7, 2009