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 Magnifier only
show a very small part
of the screen

make sure everybody
knows what happens
right now

yellow fades + focus()
help to find 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
notifications

Roles

• 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://finance.yahoo.com/currency-converter

without Javascript
http://finance.yahoo.com/currency-converter

without Javascript
http://finance.yahoo.com/currency-converter

with Javascript
http://finance.yahoo.com/currency-converter

with Javascript
http://finance.yahoo.com/currency-converter

with Javascript
http://finance.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