Why ARIA? [DevChatt 2010]
Post on 27-Jan-2015
106 Views
Preview:
DESCRIPTION
Transcript
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
top related