Aaron Gustafson
Progressive Enhancement
with ARIA
We are creating richer online experiences
2
3
...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.
7
photo by lastquest
What if you can’t use a mouse?
8
photo by placenamehere
What if you don’t see a change?9
photo by Guillermo
We can and must build better.
10
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
11
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Building betterSemantics (markup) convey the underlying meaning of the content...
Text & HTTP
(x)HTML
12
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Building betterSemantics (markup) convey the underlying meaning of the content...but if poorly applied, meaning can be obscured.
Text & HTTP
(x)HTML
12
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Building betterCSS can enhance usability through visual clues...
Text & HTTP
(x)HTML
CSS
13
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Building betterCSS can enhance usability through visual clues...but it can also reduce accessibility if misused.
Text & HTTP
(x)HTML
CSS
13
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Building betterJavaScript can be used to build more intuitive interfaces...
Text & HTTP
(x)HTML
CSS
JavaScript
14
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
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
CSS
JavaScript
14
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
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
CSS
JavaScript
ARIA
15
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Progressive Enhancement
BASIC ADVANCEDU
ser E
xper
ienc
e
Browser Capabilities
Text & HTTP
(x)HTML
CSS
JavaScript
ARIA
16
photo by Saffanna
WAI-ARIA is a new(ish) tool
17
Semantics+
18
Map OS concepts to the web
photo by steve-uk 19
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
HTML
20
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
http://habilis.net/validator-sac/http://tinyurl.com/cwyvny
20
photo by Verity Cridland
Call attention to important pieces21
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Structural Roles
22
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Structural Roles
role="banner"
23
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Structural Roles
role="main"
24
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Structural Roles
role="article"
25
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Structural Roles
role="complementary"
26
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Structural Roles
role="list"
27
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Structural Roles
role="list"
28
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Structural Roles
role="list"
29
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Structural Roles
role="list"
30
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Structural Roles
role="listitem"
31
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Structural Roles
role="form"
32
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Structural Roles
role="article"
33
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Structural Roles
role="contentinfo"
34
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Structural RolesDocument Structure
Landmarksapplicationbannercomplementary
contentinfoformmain
navigationsearch
articlecolumnheaderdefinitiondirectorydocumentgroup
headingimglistlistitemmathnote
presentationregionrowrowheaderseparator
35
photo by DavePress
Explain what something is& how it works
36
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Widget Roles<span role="button">OK</span>(of course <button>OK</button> would be better)
37
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 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>
37
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 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>
37
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Widget Rolesalertalertdialogbuttoncheckboxcomboboxdialoggridcelllinklog
marqueemenuitemmenuitemcheckboxmenuitemradiooptionprogressbarradioradiogroupscrollbar
sliderspinbuttonstatustabtabpaneltextboxtimertooltiptreeitem
Widget Container Rolesgridlistboxmenu
menubartablisttoolbar
treetreegrid
38
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 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
39
photo by exfordy
Indicate what’s going on
40
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Widget States
B(off)
B(on)
41
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 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)
41
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 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>
41
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 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>
41
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Complex Widgets
42
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Complex Widgets
role="application"
42
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Complex Widgets
role="slider"aria-labelledby="label_handle_valueA"aria-valuemin="0"aria-valuemax="71"aria-valuenow="22"aria-valuetext="Apr 04"
42
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Complex Widgets
role="presentation"
42
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Widget Statesaria-busyaria-checkedaria-disabledaria-expandedaria-grabbedaria-hiddenaria-invalidaria-pressedaria-selectedaria-valuenow (the W3C defines this as a “property”)aria-valuetext (ditto)
43
photo by kevin1024
Highlight “living” content44
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Live Regions
45
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Live Regions
<span id="chars_left_notice" class="numeric"> <strong id="status-field-char-counter" class="char-counter">140</strong></span>
46
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 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>
47
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 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>
48
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Notification Optionsoffchange not announced
politechange announced after user completes her current activity
assertiveuser agent should interrupt the user’s activity, but not immediately
49
photo by cfpg
Manage focus with slight-of-hand
50
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 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>
51
photo by Richard Jones
Piecing it all together52
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Let’s Build a Tabbed Interface
53
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 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>
54
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Static HTML with no style
55
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
A little typography
56
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Typography and color
57
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Taking another look
58
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Taking another look
.tabbed58
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 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>
59
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Understanding the flow
Page
JS?
Split the content & make
some tabs
NoYes
60
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Mouse-based interaction
61
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Assigning ARIA Roles
role="application"aria-activedescendant="folder-1"
62
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Assigning ARIA Rolesrole="tablist"
63
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Assigning ARIA Rolesrole="tab"aria-selected="true"aria-controls="folder-1"
64
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Assigning ARIA Rolesrole="tab"aria-selected="false"aria-controls="folder-4"
65
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Assigning ARIA Roles
role="tabpanel"aria-hidden="false"aria-labelledby="folder-1-tab"
66
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 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 );}
67
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Enabling the keyboardtab.onclick = swap;tab.onkeydown = moveFocus;tab.onfocus = swap;
68
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Enabling the keyboard
69
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
tabindex="-1"
Enabling the keyboard
69
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
tabindex="0"
Enabling the keyboard
69
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 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 ); }}
70
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Enabling the keyboardfunction getTab( tab ){ while ( tab.nodeName.toLowerCase() != 'li' ) { tab = tab.parentNode; } return tab;}
71
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 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; } // ...}
72
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 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(); } }}
73
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 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' ); // ...}
74
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
The Fruit (Pie) of Our Labor
75
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Who is Supporting WAI-ARIA?
76
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 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/
77
Aaron Gustafson
Progressive Enhancement
with ARIA
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 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
79