The 5 Layers of Web Accessibility

Hi there! :-)

Ogres = Onions = Web Standards?

LAYERS!

Common Frontend Development knows 3 Layers

The 5 Layers of Web Accessibility YDN Tuesday 5.5.2009 Dirk Ginader http://ginader.com http://twitter.com/ginader

The Markup is the most important Layer of all

Source order = tab order

Best matching HTML Element for the job?

Is the page understandable and usable without CSS?

Interaction using links, forms and reloads

CSS can make inaccessible too

display:none and visibility:hidden hide from everyone

:hover only works for a mouse

:focus to the rescue!

always use them combined: a:hover, a:focus{ /*awesome CSS*/ }

CSS is for Design not for Interaction

Javascript is the icing on the cake

Does anything, you need the user to do, work without Javascript?

then we can add some Magic

hijack existing interaction elements

create new buttons for JS only interactions

Screenreaders do know JS. They often just don’t know what happens...

focus() to the rescue!

mind the tab order

focus() to the rescue!

tabindex=0 makes even divs keyboard accessible

tabindex=-1 for JS only tab access

yeah focus()

Ajax = delays = tricky to communicate

inform about what happens!

you guessed it: focus()

Screenreaders update their Virtual Buffer “regularly”

while in Forms Mode they update in realtime

use the Forms Mode to update the Buffer when you need to

another layer: different CSS if Javascript is available

Change the interface for the JS version

CSS is much faster than Javascript

Tell CSS that there’s JS: document.documentElement.className += ” js”;

.module{ /* nice CSS for the non JS Layout */ } .js .module{ /* awesome CSS for the JS Layout*/ }

How does your CSS react when the text size changes?

Screen Magniﬁer only show a very small part of the screen

make sure everybody knows what happens right now

yellow fades + focus() help to ﬁnd and understand

the last Layer the new Hotness

WAI-ARIA maps existing and well known OS concepts to custom Elements in the Browser

Adds semantics to non semantic Markup

provides instant updates and notiﬁcations

• alert • banner • button • menuitem • slider

Document Landmark Roles

• application • banner • complementary • contentinfo • main • navigation • search

States and Properties

• aria-valuemin • aria-valuemax • aria-valuenow • aria-valuetext • aria-labelledby

Live Regions informing about changes

• off • polite • assertive • (rude)

You can use it today

• it does no validate • you can simply add the properties using Javascript as it depends on it anyway

• everybody can add Landmark roles now • aria-required=”true” makes a dream come true

Don’t rely on it

• There are no stats but we know that still a lot of Screenreader users are stuck on old versions without ARIA support • Progressive Enhancement all over again...

Examples

without Javascript http://ﬁnance.yahoo.com/currency-converter

with Javascript http://ﬁnance.yahoo.com/currency-converter

http://uk.tv.yahoo.com/

more • http://cli.gs/wai-aria • http://cli.gs/accessible-tabs • http://cli.gs/accessibilitytips • http://cli.gs/wai-aria-video

http://ginader.com http://twitter.com/ginader

http://blog.ginader.de	5259
http://blog.marchibbins.com	329
http://yaccessibilityblog.com	235
http://feeds.feedburner.com	122
http://paper.li	98
http://codesmiles.com	16
http://www.blog.ginader.de	14
http://www.slideshare.net	13
http://translate.googleusercontent.com	9
http://codesmiles.tumblr.com	5
http://www.heart.org	5
http://demo.proximity.fr	5
https://twitter.com	3
http://wcm1.heart.org	2
http://coderwall.com	2
http://wave.webaim.org	2
http://10.52.63.121	1
http://webcache.googleusercontent.com	1
https://blog.ginader.de	1
file://	1
http://localhost:50624	1
http://ranksit.com	1

The 5 Layers of Web Accessibility

by Dirk Ginader

Accessibility

Categories

Upload Details

Usage Rights

22 Embeds 6,125

Statistics

The 5 Layers of Web Accessibility Presentation Transcript