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

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

• 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

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

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 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

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

You know CSS?
Saturday, March 7, 2009

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

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 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

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
• 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

• 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

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

• 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

• 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

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/archives/2009/02/07/
jQuery-Accessible-Tabs-How-to-make-
tabs-REALLY-accessible.php
• http://www.accessibilitytips.com
Saturday, March 7, 2009

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

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