Aaron Gustafson Progressive Enhancement with ARIA
Jan 27, 2015
Aaron Gustafson
Progressive Enhancement
with ARIA
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.
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
Building betterEvery great experience on the web begins with two key things: clear, well-written prose and the HTTP protocol.
Text & HTTP
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
Building betterSemantics (markup) convey the underlying meaning of the content...but if poorly applied, meaning can be obscured.
Text & HTTP
(x)HTML
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
Building betterCSS can enhance usability through visual clues...but it can also reduce accessibility if misused.
Text & HTTP
(x)HTML
CSS
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
Progressive Enhancement
BASIC ADVANCEDU
ser E
xper
ienc
e
Browser Capabilities
Text & HTTP
(x)HTML
CSS
JavaScript
ARIA
photo by Saffanna
WAI-ARIA is a new(ish) tool
Semantics+
Map OS concepts to the web
photo by steve-uk
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
HTML
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
HTML
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
http://habilis.net/validator-sac/http://tinyurl.com/cwyvny
photo by Verity Cridland
Call attention to important pieces
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
Structural Roles
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
Structural Roles
role="banner"
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
Structural Roles
role="main"
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
Structural Rolesrole="navigation"
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
Structural Roles
role="article"
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
Structural Roles
role="complementary"
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
Structural Roles
role="list"
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
Structural Roles
role="listitem"
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
Structural Roles
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
Structural Roles
role="form"
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
Structural Roles
role="contentinfo"
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
Structural RolesDocument Structure
Landmarksapplicationbannercomplementary
contentinfoformmain
navigationsearch
articlecolumnheaderdefinitiondirectorydocumentgroup
headingimglistlistitemmathnote
presentationregionrowrowheaderseparator
photo by DavePress
Explain what something is& how it works
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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>
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
Widget Rolesalertalertdialogbuttoncheckboxcomboboxdialoggridcelllinklog
marqueemenuitemmenuitemcheckboxmenuitemradiooptionprogressbarradioradiogroupscrollbar
sliderspinbuttonstatustabtabpaneltextboxtimertooltiptreeitem
Widget Container Rolesgridlistboxmenu
menubartablisttoolbar
treetreegrid
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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)
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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>
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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>
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
Complex Widgets
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
Complex Widgets
role="application"
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
Complex Widgets
role="slider"aria-labelledby="label_handle_valueA"aria-valuemin="0"aria-valuemax="71"aria-valuenow="22"aria-valuetext="Apr 04"
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
Complex Widgets
role="presentation"
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
Live Regions
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
Live Regions
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
Live Regions
<span id="chars_left_notice" class="numeric"> <strong id="status-field-char-counter" class="char-counter">140</strong></span>
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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>
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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>
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
Let’s Build a Tabbed Interface
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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>
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
Static HTML with no style
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
A little typography
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
Typography and color
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
Taking another look
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
Taking another look
.tabbed
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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>
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
Understanding the flow
Page
JS?
Split the content & make
some tabs
NoYes
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
Mouse-based interaction
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
Assigning ARIA Roles
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
Assigning ARIA Roles
role="application"aria-activedescendant="folder-1"
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
Assigning ARIA Roles
role="tabpanel"aria-hidden="false"aria-labelledby="folder-1-tab"
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
Assigning ARIA Rolesrole="tablist"
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
Assigning ARIA Rolesrole="tab"aria-selected="false"aria-describedby="folder-4"
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
Assigning ARIA Rolesrole="tab"aria-selected="true"aria-describedby="folder-1"
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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 );}
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
Enabling the keyboardtab.onclick = swap;tab.onkeydown = moveFocus;tab.onfocus = swap;
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
Enabling the keyboard
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
tabindex="-1"
Enabling the keyboard
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
tabindex="0"
Enabling the keyboard
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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 ); }}
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
Enabling the keyboardfunction getTab( tab ){ while ( tab.nodeName.toLowerCase() != 'li' ) { tab = tab.parentNode; } return tab;}
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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; } // ...}
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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(); } }}
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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' ); // ...}
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
The Fruit (Pie) of Our Labor
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010
Who is Supporting WAI-ARIA?
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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/
Aaron Gustafson
Progressive Enhancement
with ARIA
Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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