Everything you ever wanted to know about WAI-ARIA

...but were afraid to ask

Okay, that title is a lie...we only have 15 minutes

So you’ll have to make do with a quick introduction

Send complaints to Norm

What is WAI-ARIA?

What is WAI-ARIA?

Web Accessibility Initiative: Accessible Rich Internet Applications

W3C Working Draft

Developed by W3C Protocols and Formats Working Group

What is WAI-ARIA?

“ WAI-ARIA provides a framework for adding attributes to identify features for user interaction, how they relate to each other, and their current state.”

WAI-ARIA Overviewhttp://www.w3.org/WAI/intro/aria.php

What is WAI-ARIA?

“ WAI-ARIA is a specification that provides a means of describing roles, states, and properties for custom widgets so that they are recognisable and usable by assistive technology users.”

Gez Lemon - Introduction to WAI ARIA http://dev.opera.com/articles/view/introduction-to-wai-aria/

Why do we need it?

Why do we need it?

Why do we need it?

<div id="slider-bg" title="Volume"> <div id="slider-thumb"> <img src="yui/assets/thumb-n.gif"> </div></div>

Where is it supported?

Where is it supported?Browsers:

Firefox 1.5+, Opera 9.5+, IE8 Beta and WebKit

Assistive technologies:

JAWS 7.1+, Windows-Eyes 5.5+, NVDA,Zoomtext 9+, FireVox

Not ubiquitous or complete, but support is improving all the time.

Treat WAI-ARIA like progressive enhancement for accessibility.

What does it give us?

What does it give us?

• Keyboard navigation

• Roles and states

• Live regions

• Document landmarks

• ...and much, much more

Keyboard navigation

Keyboard navigationAllows tabindex to be applied to any element

Extends allowed tabindex attribute values:

• tabindex="0"Keyboard focussable, tab order determinedby source order

• tabindex="-1"Programatically focussable, but not in tab order

Allows tabindex attribute to be set on any element.

Roles and States

ARIA Roles and StatesProvides semantics for DHTML widgets

Roles:

alert, button, dialog, menu, slider, tab, tree, grid, ...

States:

describedby, expanded, pressed, required, selected, valuenow, ...

ARIA Roles and States

<div id="slider-bg" title="Volume"> <div id="slider-thumb"> <img src="yui/assets/thumb-n.gif"> </div></div>

ARIA Roles and States

<div id="slider-bg" title="Volume" tabindex="0"> <div id="slider-thumb"> <img src="yui/assets/thumb-n.gif"> </div></div>

ARIA Roles and States

<div id="slider-bg" title="Volume" tabindex="0" role="slider"> <div id="slider-thumb"> <img src="yui/assets/thumb-n.gif"> </div></div>

ARIA Roles and States

<div id="slider-bg" title="Volume" tabindex="0" role="slider" aria-valuemin=”1”> <div id="slider-thumb"> <img src="yui/assets/thumb-n.gif"> </div></div>

ARIA Roles and States

<div id="slider-bg" title="Volume" tabindex="0" role="slider" aria-valuemin="1" aria-valuemax="11"> <div id="slider-thumb"> <img src="yui/assets/thumb-n.gif"> </div></div>

ARIA Roles and States

<div id="slider-bg" title="Volume" tabindex="0" role="slider" aria-valuemin="1" aria-valuemax="11" aria-valuenow="1"> <div id="slider-thumb"> <img src="yui/assets/thumb-n.gif"> </div></div>

ARIA Roles and States

var slider = new YAHOO.widget.Slider.getHorizSlider( "slider-bg", "slider-thumb", 0, 200, 20);

ARIA Roles and States

var slider = new YAHOO.widget.Slider.getHorizSlider( "slider-bg", "slider-thumb", 0, 200, 20);

slider.subscribe("change", function( offset ) {});

ARIA Roles and States

var slider = new YAHOO.widget.Slider.getHorizSlider( "slider-bg", "slider-thumb", 0, 200, 20);

slider.subscribe("change", function( offset ) { value = Math.floor( offset / 20 ) + 1;});

ARIA Roles and States

var slider = new YAHOO.widget.Slider.getHorizSlider( "slider-bg", "slider-thumb", 0, 200, 20);

slider.subscribe("change", function( offset ) { value = Math.floor( offset / 20 ) + 1; this.getEl().setAttribute( "aria-valuenow", value );});

ARIA Roles and States

<div id="slider-bg" title="Volume" tabindex="0" role="slider" aria-valuemin="1" aria-valuemax="11" aria-valuenow="1"> <div id="slider-thumb"> <img src="yui/assets/thumb-n.gif"> </div></div>

ARIA Roles and States

<p id="desc"> Use the left/right arrow keys to change the volume.</p>

<div id="slider-bg" title="Volume" tabindex="0" role="slider" aria-valuemin="1" aria-valuemax="11" aria-valuenow="1" aria-describedby="desc"> <div id="slider-thumb"> <img src="yui/assets/thumb-n.gif"> </div></div>

Live Regions

Live RegionsFinally, a solution to DOM update notification

Provides different levels of notification:

• off - does exactly what you’d think

• polite - do not notify until the user has completed their current activity

• assertive - somewhere between polite and rude

• rude - interrupt the user and notify immediately

Live Regions

<div id="basket"> <h3>Shopping basket</h3> <ol> <li><a href="/product/1234">My Little Pony DVD</a></li> <li><a href="/product/4321">How to boil rabbits</a></li> </ol> <a href="/basket/edit">Edit basket</a> <a href="/basket/buy">Buy these items</a></div>

Live Regions

<div id="basket"> <h3>Shopping basket</h3> <ol aria-live="polite"> <li><a href="/product/1234">My Little Pony DVD</a></li> <li><a href="/product/4321">How to boil rabbits</a></li> </ol> <a href="/basket/edit">Edit basket</a> <a href="/basket/buy">Buy these items</a></div>

Live Regions

<div id="basket"> <h3>Shopping basket</h3> <ol aria-live="polite"> <li><a href="/product/1234">My Little Pony DVD</a></li> <li><a href="/product/4321">How to boil rabbits</a></li> <li><a href="/product/1324">Vasoline</a></li> </ol> <a href="/basket/edit">Edit basket</a> <a href="/basket/buy">Buy these items</a></div>

Live RegionsAdditional properties that affect aria-live behavior:

• aria-atomic: update whole or part region

• aria-busy: temporarily suspend notification

• aria-relevant: specify notification trigger (add, remove, etc.)

• aria-channel: option to use separate hardware channel for seriously important notifications

Document Landmarks

Document Landmark RolesHelp to define document structure

To give context and navigational waypoints

Document landmark roles:

banner, contentinfo, definition, main, navigation, note, search, secondary, seealso

Based on XHTML role attribute model

Document Landmark Roles

BANNER

NAVIGATION

MAIN

SEARCH

ARIA Roles and States

<div role="navigation"> <div role="search"> ... </div> ...</div>

<div role="main"> ...</div>

<div role="banner"> <!-- Welcome to LREC City --></div>

The V word

The V wordARIA attributes not defined in HTML 4.01 Strict DTD

Validating static HTML with ARIA attributes will return errors.

Choices:

• Put up with validation errors

• Inject ARIA attributes with JavaScript

OK for JS widgets, but what about landmarks?

• Write a custom DTD

That’s yer lotno awkward questions please :o)

Resources

• WAI-ARIA Overviewhttp://www.w3.org/WAI/intro/aria.php

• Introduction to WAI-ARIAhttp://dev.opera.com/articles/view/introduction-to-wai-aria/

• DHTML Style Guidehttp://dev.aol.com/dhtml_style_guide

• WAI-ARIA Working Drafthttp://www.w3.org/TR/2008/WD-wai-aria-20080204/