Avoiding common
                          Accessibility mistakes
                                  think visibility 2009
 ...
You know SEO?
                           Helps a LOT!


Saturday, March 7, 2009
• easily understandable valuable content
                     • semantically rich markup
                     • the >right...
• good “speaking” URLs
                     • Link-texts that make sense by themselves
                     • valuable alt...
You know Usability?
       Accessibility === Usability!
        except it’s for everyone...


Saturday, March 7, 2009
• use the tab and enter key only
                          - can you navigate your site?

                     • disable J...
• zoom the screen
                          are you able to realize all the changes?

                     • close your ey...
You know CSS?



Saturday, March 7, 2009
• using CSS is great for accessibility - right?
                     • yeah...
                     • ... not necessarily
...
No I will not preach
                           <table> Layout ;-)


Saturday, March 7, 2009
Sorry...



Saturday, March 7, 2009
• used in the wrong way CSS can reduce
                          accessibility

                     • display:none and vi...
You know Javascript?



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


Saturday, March 7, 2009
• used correctly, Javascript is not only nicely
                          accessible but can even enhance accessibility

 ...
• progressively enhance the default non-js
                          layout and hijack the existing controls to do
       ...
Screenreaders don’t
                          understand Javascript
                               anyway...


Saturday, M...
• is there still someone believing that?
                     • most Screenreaders actually handle
                       ...
• inform Screenreaders about what’s
                          happening

                     • a logic and understandable...
Examples



Saturday, March 7, 2009
without Javascript




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




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




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




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




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




                          http://finance.yahoo.com/currency-converter
Saturday, March 7, 2009
http://uk.tv.yahoo.com/

Saturday, March 7, 2009
More Examples

                     • http://icant.co.uk/easy-youtube
                     • http://blog.ginader.de/archiv...
For more geeky tech details see you at Geekup Leeds 15.04.2009




                              http://ginader.com
      ...
More Details?
                          Geekup Leeds
                              15.04.2009




Saturday, March 7, 2009
Upcoming SlideShare
Loading in …5
×

Avoiding common Accessibility mistakes

4,303 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
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,303
On SlideShare
0
From Embeds
0
Number of Embeds
837
Actions
Shares
0
Downloads
51
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide




























































  • 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

    ×