Progressive Enhancement with ARIA [Accessibility Summit 2010]

Aaron Gustafson

Progressive Enhancement

with ARIA

We are creating richer online experiences

...and the barrierswhich prohibit them.

photo by drcorneilus 4

Accessibility is crucial

photo by TimothyJ 5

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

photo by Ed Yourdon 6

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?9

photo by Guillermo

We can and must build better.

Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010

Building betterEvery great experience on the web begins with two key things: clear, well-written prose and the HTTP protocol.

Text & HTTP

Building betterSemantics (markup) convey the underlying meaning of the content...

Text & HTTP

(x)HTML

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

Text & HTTP

(x)HTML

Building betterCSS can enhance usability through visual clues...

Text & HTTP

(x)HTML

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

Text & HTTP

(x)HTML

Building betterJavaScript can be used to build more intuitive interfaces...

Text & HTTP

(x)HTML

JavaScript

Building better

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

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

Text & HTTP

(x)HTML

JavaScript

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

Text & HTTP

(x)HTML

JavaScript

BASIC ADVANCEDU

Browser Capabilities

Text & HTTP

(x)HTML

JavaScript

photo by Saffanna

WAI-ARIA is a new(ish) tool

Semantics+

Map OS concepts to the web

photo by steve-uk 19

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

photo by Verity Cridland

Call attention to important pieces21

Structural Roles

role="banner"

Structural Roles

role="main"

Structural Roles

role="article"

Structural Roles

role="complementary"

Structural Roles

role="list"

Structural Roles

role="list"

Structural Roles

role="list"

Structural Roles

role="list"

Structural Roles

role="listitem"

Structural Roles

role="form"

Structural Roles

role="article"

Structural Roles

role="contentinfo"

Structural RolesDocument Structure

Landmarksapplicationbannercomplementary

contentinfoformmain

navigationsearch

articlecolumnheaderdefinitiondirectorydocumentgroup

headingimglistlistitemmathnote

presentationregionrowrowheaderseparator

photo by DavePress

Explain what something is& how it works

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>

Widget Rolesalertalertdialogbuttoncheckboxcomboboxdialoggridcelllinklog

marqueemenuitemmenuitemcheckboxmenuitemradiooptionprogressbarradioradiogroupscrollbar

sliderspinbuttonstatustabtabpaneltextboxtimertooltiptreeitem

Widget Container Rolesgridlistboxmenu

menubartablisttoolbar

treetreegrid

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

Widget States

B(off)

Widget States

B(off)

Widget States

B(off)

Widget States

B(off)

Complex Widgets

role="application"

Complex Widgets

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

Complex Widgets

role="presentation"

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” content44

Live Regions

Live Regions

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>

Notification Optionsoffchange not announced

politechange announced after user completes her current activity

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

photo by cfpg

Manage focus with slight-of-hand

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 together52

Let’s Build a Tabbed Interface

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>

Static HTML with no style

A little typography

Typography and color

Taking another look

.tabbed58

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>

Understanding the flow

Split the content & make

some tabs

Mouse-based interaction

Assigning ARIA Roles

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

Assigning ARIA Rolesrole="tablist"

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

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

Assigning ARIA Roles

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

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 );}

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

Enabling the keyboard

tabindex="-1"

tabindex="0"

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 ); }}

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

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; } // ...}

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(); } }}

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' ); // ...}

The Fruit (Pie) of Our Labor

Who is Supporting WAI-ARIA?

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/

Aaron Gustafson

with ARIA

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

Progressive Enhancement with ARIA [Accessibility Summit 2010]

accessibility summit

accessibility isnt

main24progressive enhancement

list27progressive enhancement

list28progressive enhancement

list29progressive enhancement

list30progressive enhancement

form32progressive enhancement

Technology

Mobile Accessibility Guidelines - Web viewDraft BBC Mobile.....

Creating dynamic and accessible content in Drupal 7 using...

Real World Accessibility with ARIA

ISSUE 94, JUN 2009 Accessibility and Computing ·...

HTML5 & WAI-ARIA Forms with jQuery Validation Paul J. Adam.....

Open the Web - Dev.Opera · JavaScript viour Scripting CSS....

Accessibility of Custom User Interface Components Using ...

Progressive tenses Present progressive and Past progressive....

Hitting the accessibility high notes with ARIA

PowerPoint Presentation · Aria - Carpet - Rubber...

HTML5 and ARIA accessibility - Bangalore 2013

© 2008 IBM Corporation Emerging Internet Technologies Real....

Accessibility of Digital Platforms at Universities for...

purgatorio terra aria inferno aria Gerusalemme

Implementing ARIA for Real World Accessibility

Conceptualization Approach for Accessibility-Aware...