WAI-ARIA
It's EASY

Steve Faulkner - The Paciello Group

@media 2008


WAI = Web Accessibility Initiative

ARIA = Accessible Rich Internet Applications


What is it?

It's a W3C Specification, like HTML, CSS, XML etc.

It is very close to becoming a W3C Recommendation.


What's it do?

It makes sense


What's it do?

Without WAI-ARIA

visual users see an 'OK' button

aural users hear 'link graphic OK'


What's it do?

With WAI-ARIA

visual users see an 'OK' button

aural users hear 'button OK - press spacebar to activate'


What's the difference?

The addition of a role attribute

<a href="" title="OK" role="button"> <img src="ok.gif" alt="OK"> </a>


What's gained?

Correct role information: "Button"

Usage instructions: "To activate press spacebar"


Couldn't this example also be achieved without using WAI - ARIA?

YES

<input type="image" src="ok.gif" alt="OK">

Wherever possible use native HTML elements.


What's it do 2?

Without WAI-ARIA

visual users get state information convyed by ba change in the button colour

aural users do not get the state information, they don't know whether the button is pressed or not

With WAI-ARIA

aural users can hear if the button is pressed.


What's the difference?

Without WAI-ARIA

button not selected

<input type="image" src="hioff.gif" alt="highlight">

button selected

<input type="image" src="hion.gif" alt="highlight">

With WAI-ARIA

button not selected

<input type="image" src="hioff.gif" alt="highlight" role="button" aria-pressed="false">

button selected

<input type="image" src="hion.gif" alt="highlight" role="button" aria-pressed="true">


What's gained?

state information:

"pressed"


AJAX (dynamic content updates) and WAI-ARIA?.

Two main issues:

  1. Users not having access to content changes.
  2. Users not being aware of content changes.

Live Regions solves the 2nd issue. The first issue and why it occurs is detailed in AJAX and Screen Readers - Content Access Issues


AJAX (dynamic content updates) and WAI-ARIA?.

Users who rely on their sight as the primary sense are able to access web content in a non-linear fashion. So they can percieve much more content at any given moment.

the majority of the twitter user interface is percievable visually

Users who access web content aurally do so linearly and have much more limited access to content at a given moment.

only a small part of the twitter user interface is available to aural users


What's it do? live regions

Solves the second problem:

"Users not being aware of content changes."

In the case of the twitter character countdown, visual users can easily monitor the character count as it changes.

Live regions provides a similar capability to aural users: The value of the character count is announced at their convenience, without the need to move focus away from writing a message in the text box.


What's the difference?

Without WAI-ARIA

<span>115</span>

With WAI-ARIA

<span aria-live="polite">115</span>


Live regions - on being polite

Value of aria-live attribute:


What's gained?

Using Live Regions provides access to content updates.


What's the buzz?

"ARIA is the most important technology to help people with disabilities since the ability for application components to expose their accessibility information"

Rich Schwerdtfeger


More buzz


Who is supporting WAI-ARIA?

Firefox, Mozilla Foundation, IBM, Internet Explorer, Opera, Safari, JAWS, Window Eyes, Zoomtext, Google, Yahoo, Fire Vox, NVDA, Orca, Sun, adobe and DOJO.

Support is also being implemented in JQuery


WAI-ARIA and HTML

HTML 4 + WAI-ARIA = HTML more

ARIA provides additional accessibility features to those natively available in HTML 4

HTML5 + WAI-ARIA = HTML more

HTML5 will provide some extra inbuilt support for accessibility, but this support is not expected to be as extensive as that provided by WAI-ARIA. Furthermore it is envisaged that some of the accessibility features currently available in HTML 4 may not be implemented in HTML5, WAI-ARIA features could fill in the gaps.


WAI-ARIA Resources


WAI-ARIA Demonstrations


Thanks to: