Your SlideShare is downloading. ×
  • Like
Avoiding common Accessibility mistakes
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Avoiding common Accessibility mistakes

  • 3,749 views
Published

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

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,749
On SlideShare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
49
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide




























































Transcript

  • 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