Aaron Gustafson

Why ARIA?or

Why should I bother to make my website accessible?

We are creating richer online experiences

...and the barrierswhich prohibit them.

photo by drcorneilus

Aaron Gustafson

Accessibility is crucial

photo by TimothyJ

Google is a voracious consumerof the web. And it’s blind.

photo by Ed Yourdon

But accessibility isn’t only about

supporting screen readers.

photo by lastquest

What if you can’t use a mouse?

photo by placenamehere

What if you don’t see a change?

photo by Guillermo

We can and must build better.

Why ARIA?! DevChatt - March 2010

Building better

(x)HTML

Semantics (markup) convey the underlying meaning of the content...but if poorly applied, meaning can be obscured.

Why ARIA?! DevChatt - March 2010

Building better

(x)HTML

CSS

CSS can enhance usability through visual clues...but it can also reduce accessibility if misused.

Why ARIA?! DevChatt - March 2010

Building better

(x)HTML

CSS

JS

but it cannot be relied on 100% of the time.

JavaScript can be used to build more intuitive interfaces...

Why ARIA?! DevChatt - March 2010

Building better

(x)HTML

CSS

JS

ARIA

WAI-ARIA extends the semantics of the document to provide additional insight into the state of the interface and how to interact with it.

Why ARIA?! DevChatt - March 2010

Progressive Enhancement

(x)HTML

CSS

JS

ARIA

BASIC ADVANCEDU

ser E

xper

ienc

e

Browser Capabilities

photo by Saffanna

WAI-ARIA is a new(ish) tool

Semantics+

Map OS concepts to the web

photo by steve-uk

Why ARIA?! DevChatt - March 2010

HTML

Why ARIA?! DevChatt - March 2010

http://habilis.net/validator-sac/http://tinyurl.com/cwyvny

photo by Verity Cridland

Call attention to important pieces

Why ARIA?! DevChatt - March 2010

Structural Rolesrole="banner"

Why ARIA?! DevChatt - March 2010

Structural Roles

role="main"

Why ARIA?! DevChatt - March 2010

Structural Rolesrole="navigation"

Why ARIA?! DevChatt - March 2010

Structural Roles

role="article"

Why ARIA?! DevChatt - March 2010

Structural Roles

role="list"(but hopefully you used a ul or ol)

Why ARIA?! DevChatt - March 2010

Structural Roles

role="form"

Why ARIA?! DevChatt - March 2010

Structural Roles

role="complementary"

Why ARIA?! DevChatt - March 2010

Structural Roles

role="contentinfo"

Why ARIA?! DevChatt - March 2010

Structural Roles

role="list"

Why ARIA?! DevChatt - March 2010

Structural Roles

role="listitem"

Why ARIA?! DevChatt - March 2010

Structural RolesDocument Structure

Landmarksapplicationbannercomplementary

contentinfoformmain

navigationsearch

articlecolumnheaderdefinitiondirectorydocumentgroup

headingimglistlistitemmathnote

presentationregionrowrowheaderseparator

photo by DavePress

Explain what something is& how it works

Why ARIA?! DevChatt - March 2010

Widget Roles<span role="button">OK</span>(of course <button>OK</button> would be better)

<div role="alert"> <p>Something went wrong.</p></div>

<div role="alertdialog"> <p>Something went wrong.</p> <img src="x.png" alt="dismiss" role="button" /></div>

Why ARIA?! DevChatt - March 2010

Widget Rolesalertalertdialogbuttoncheckboxcomboboxdialoggridcelllinklog

marqueemenuitemmenuitemcheckboxmenuitemradiooptionprogressbarradioradiogroupscrollbar

sliderspinbuttonstatustabtabpaneltextboxtimertooltiptreeitem

Widget Container Rolesgridlistboxmenu

menubartablisttoolbar

treetreegrid

Why ARIA?! DevChatt - March 2010

Widget Propertiesaria-activedescendantaria-atomicaria-autocompletearia-controlsaria-describedbyaria-dropeffectaria-flowtoaria-haspopuparia-labelaria-labelledbyaria-levelaria-live

aria-multilinearia-multiselectablearia-orientationaria-ownsaria-posinsetaria-readonlyaria-relevant aria-requiredaria-setsizearia-sortaria-valuemaxaria-valuemin

photo by exfordy

Indicate what’s going on

Why ARIA?! DevChatt - March 2010

Widget States

<button> <img src="bold-on.png" alt="bold" /></button>

<button> <img src="bold-off.png" alt="bold" /></button>

B(off)

B(on)

Why ARIA?! DevChatt - March 2010

Widget States

B(off)

B(on)

<button> <img src="bold-on.png" alt="bold" /></button>

<button> <img src="bold-off.png" alt="not bold" /></button>

Why ARIA?! DevChatt - March 2010

Widget States

B(off)

B(on)

<button role="button" aria-pressed="true"> <img src="bold-on.png" alt="bold" /></button>

<button role="button" aria-pressed="false"> <img src="bold-off.png" alt="not bold" /></button>

Why ARIA?! DevChatt - March 2010

Complex Widgets

role="application"

Why ARIA?! DevChatt - March 2010

Complex Widgets

role="slider"aria-labelledby="label_handle_valueA"aria-valuemin="0"aria-valuemax="71"aria-valuenow="22"aria-valuetext="Apr 04"

Why ARIA?! DevChatt - March 2010

Complex Widgets

role="presentation"

Why ARIA?! DevChatt - March 2010

Widget Statesaria-busyaria-checkedaria-disabledaria-expandedaria-grabbedaria-hiddenaria-invalidaria-pressedaria-selectedaria-valuenow (the W3C defines this as a “property”)aria-valuetext (ditto)

photo by kevin1024

Highlight “living” content

Why ARIA?! DevChatt - March 2010

Live Regions

<span id="chars_left_notice" class="numeric"> <strong id="status-field-char-counter" class="char-counter">140</strong></span>

Why ARIA?! DevChatt - March 2010

Live Regions

<span id="chars_left_notice" class="numeric" aria-live="polite"> <strong id="status-field-char-counter" class="char-counter">140</strong></span>

Why ARIA?! DevChatt - March 2010

Live Regions

<span id="chars_left_notice" class="numeric" aria-live="polite"> <strong id="status-field-char-counter" class="char-counter">140</strong> characters left</span>

Why ARIA?! DevChatt - March 2010

Notification Optionsoffchange not announced

politechange announced after user completes her current activity

assertiveuser agent should interrupt the user’s activity, but not immediately

rudeuser agent should interrupt the user’s activity immediately

photo by cfpg

Manage focus with slight-of-hand

Why ARIA?! DevChatt - March 2010

tabindex helps manage focus<div tabindex="0"> <p>This <code>div</code> can now receive focus using a keyboard’s <kbd>tab</kbd> key. How cool is that?</p></div><div tabindex="-1"> <p>This <code>div</code> won’t be focused by a user via the <kbd>tab</kbd> key, but JavaScript can <code>focus()</code> it. Nifty, huh?</p></div>

photo by Richard Jones

Piecing it all together

Why ARIA?! DevChatt - March 2010

Let’s Build a Tabbed Interface

Why ARIA?! DevChatt - March 2010

Traditional approach<h1>Pumpkin Pie</h1><div class="container"> <div class="section"> <h2>Overview</h2> <img src="pie.jpg" alt=""> <p>Whether you're hosting a festive party or a casual get-together with friends, our Pumpkin Pie will make entertaining easy!</p> ... </div> ... <ul class="tabs"> <li><a href="#">Overview</a></li> <li><a href="#">Ingredients</a></li> <li><a href="#">Directions</a></li> <li><a href="#">Nutrition</a></li> </ul></div>

Why ARIA?! DevChatt - March 2010

Static HTML with no style

Why ARIA?! DevChatt - March 2010

A little typography

Why ARIA?! DevChatt - March 2010

Typography and color

Why ARIA?! DevChatt - March 2010

Taking another look

Why ARIA?! DevChatt - March 2010

Taking another look

.tabbed

Why ARIA?! DevChatt - March 2010

Required source<h1>Pumpkin Pie</h1><div class="tabbed"> <h2>Overview</h2> <img src="pie.jpg" alt="" /> <p>Whether you're hosting a festive party or a casual get-together with friends, our Pumpkin Pie will make entertaining easy!</p> ... <h2>Ingredients</h2> <ul> <li>1 (9<abbr title="inch">in</abbr>) unbaked deep dish pie crust</li> <li>½ cup white sugar</li> ... </ul> <h2>Directions</h2> ...</div>

Why ARIA?! DevChatt - March 2010

Understanding the flow

Page

JS?

Split the content & make

some tabs

NoYes

Why ARIA?! DevChatt - March 2010

Mouse-based interaction

Why ARIA?! DevChatt - March 2010

Assigning ARIA Roles

role="application"aria-activedescendant="folder-1"

Why ARIA?! DevChatt - March 2010

Assigning ARIA Roles

role="tabpanel"aria-hidden="false"aria-labelledby="folder-1-tab"

Why ARIA?! DevChatt - March 2010

Assigning ARIA Rolesrole="tablist"

Why ARIA?! DevChatt - March 2010

Assigning ARIA Rolesrole="tab"aria-selected="false"aria-describedby="folder-4"

Why ARIA?! DevChatt - March 2010

Assigning ARIA Rolesrole="tab"aria-selected="true"aria-describedby="folder-1"

Why ARIA?! DevChatt - March 2010

Updating states and propertiestab.onclick = swap;

// ...

function swap( e ){ // ... old_tab.setAttribute( 'aria-selected', 'false' ); // ... tab.setAttribute( 'aria-selected', 'true' ); // ... old_folder.setAttribute( 'aria-hidden', 'true' ); // ... new_folder.setAttribute( 'aria-hidden', 'false' ); // ... _cabinet.setAttribute( 'aria-activedescendant', _active );}

Why ARIA?! DevChatt - March 2010

Enabling the keyboardtab.onclick = swap;tab.onkeydown = moveFocus;tab.onfocus = swap;

Why ARIA?! DevChatt - March 2010

tabindex="0"

Enabling the keyboard

Why ARIA?! DevChatt - March 2010

tabindex="-1"

Enabling the keyboard

Why ARIA?! DevChatt - March 2010

Enabling the keyboardfunction moveFocus( e ) { e = ( e ) ? e : event; var tab = e.target || e.srcElement, key = e.keyCode || e.charCode, pass = true; tab = getTab( tab ); // keyboard handling goes here if ( ! pass ) { return cancel( e ); }}

Why ARIA?! DevChatt - March 2010

Enabling the keyboardfunction getTab( tab ){ while ( tab.nodeName.toLowerCase() != 'li' ) { tab = tab.parentNode; } return tab;}

Why ARIA?! DevChatt - March 2010

Enabling the keyboardfunction moveFocus( e ) { // ... switch ( key ) { case 37: // left arrow case 38: // up arrow move( tab, 'previous', false ); pass = false; break; // down (39), right (40), home (36), end (35) // should be added here case 27: // escape tab.blur(); pass = false; break; } // ...}

Why ARIA?! DevChatt - March 2010

Enabling the keyboardfunction move( tab, direction, complete ) { if ( complete ) { if ( direction == 'previous' ) { tab.parentNode.childNodes[0].focus(); } else { tab.parentNode .childNodes[tab.parentNode .childNodes.length-1].focus(); } } else { var target = direction == 'previous' ? tab.previousSibling : tab.nextSibling; if ( target ) { target.focus(); } }}

Why ARIA?! DevChatt - March 2010

Enabling the keyboardfunction swap( e ){ // ... old_tab.setAttribute( 'aria-selected', 'false' ); old_tab.setAttribute( 'tabindex', '-1' ); // ... tab.setAttribute( 'aria-selected', 'true' ); tab.setAttribute( 'tabindex', '0' ); // ... old_folder.setAttribute( 'aria-hidden', 'true' ); old_folder.setAttribute( 'tabindex', '-1' ); // ... new_folder.setAttribute( 'aria-hidden', 'false' ); new_folder.setAttribute( 'tabindex', '0' ); // ...}

Why ARIA?! DevChatt - March 2010

The Fruit (Pie) of Our Labor

Why ARIA?! DevChatt - March 2010

Who is Supporting WAI-ARIA?

Why ARIA?! DevChatt - March 2010

For MoreWAI-ARIA Specw3.org/TR/wai-aria/

WAI-ARIA Support in Browserspaciellogroup.com/blog/aria-tests/ARIA-SafariaOperaIEFF.html

TabInterfaceeasy-designs.github.com/tabinterface.js/

Why ARIA?! DevChatt - March 2010

Slides available athttp://slideshare.net/AaronGustafson

This presentation is licensed underCreative Commons

Attribution-Noncommercial-Share Alike 3.0

flickr Photo Credits“ferris wheel? not yet...” by drcorneilus

“Hunter Museum” by TimothyJ“No, I don't need any help - I'm…” by Ed Yourdon

“The almighty mouse” by lastquest“wii browser - zoomed in” by placenamehere

“Legospective” by Guillermо“I love my toolbox 15 July Scavenger Hunt” by Saffanna

“Dual Samsung Monitors” by steve-uk“Keystone of the Monumental Arch,…” by Verity Cridland

“Lego” by DavePress“iFlickr touch screen” by exfordy

“Green Plant” by kevin1024“Cartas” by cfpg

“Lego Millenium Falcon” by Richard Jones