Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Avoiding common Accessibility mistakes

4,681 views

Published on

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

Published in: Technology, Design
  • Be the first to comment

Avoiding common Accessibility mistakes

  1. 1. Avoiding common Accessibility mistakes think visibility 2009 Dirk Ginader http://ginader.com http://twitter.com/ginader Saturday, March 7, 2009
  2. 2. You know SEO? Helps a LOT! Saturday, March 7, 2009
  3. 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. 4. • good “speaking” URLs • Link-texts that make sense by themselves • valuable alternative texts on Images Saturday, March 7, 2009
  5. 5. You know Usability? Accessibility === Usability! except it’s for everyone... Saturday, March 7, 2009
  6. 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. 7. • zoom the screen are you able to realize all the changes? • close your eyes ... Saturday, March 7, 2009
  8. 8. You know CSS? Saturday, March 7, 2009
  9. 9. • using CSS is great for accessibility - right? • yeah... • ... not necessarily Saturday, March 7, 2009
  10. 10. No I will not preach <table> Layout ;-) Saturday, March 7, 2009
  11. 11. Sorry... Saturday, March 7, 2009
  12. 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. 13. You know Javascript? Saturday, March 7, 2009
  14. 14. • it’s evil - right? • nope... • ... not necessarily Saturday, March 7, 2009
  15. 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. 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. 17. Screenreaders don’t understand Javascript anyway... Saturday, March 7, 2009
  18. 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. 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. 20. Examples Saturday, March 7, 2009
  21. 21. without Javascript http://finance.yahoo.com/currency-converter Saturday, March 7, 2009
  22. 22. without Javascript http://finance.yahoo.com/currency-converter Saturday, March 7, 2009
  23. 23. without Javascript http://finance.yahoo.com/currency-converter Saturday, March 7, 2009
  24. 24. with Javascript http://finance.yahoo.com/currency-converter Saturday, March 7, 2009
  25. 25. with Javascript http://finance.yahoo.com/currency-converter Saturday, March 7, 2009
  26. 26. with Javascript http://finance.yahoo.com/currency-converter Saturday, March 7, 2009
  27. 27. http://uk.tv.yahoo.com/ Saturday, March 7, 2009
  28. 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. 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. 30. More Details? Geekup Leeds 15.04.2009 Saturday, March 7, 2009

×