why aria? [devchatt 2010]
DESCRIPTION
This session covers why you should pay attention to the accessibility of your web site or application and then walks you through how to do it using WAI-ARIA and JavaScript.TRANSCRIPT
![Page 1: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/1.jpg)
Aaron Gustafson
Why ARIA?or
Why should I bother to make my website accessible?
![Page 2: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/2.jpg)
We are creating richer online experiences
![Page 3: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/3.jpg)
![Page 4: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/4.jpg)
...and the barrierswhich prohibit them.
photo by drcorneilus
![Page 5: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/5.jpg)
Aaron Gustafson
Accessibility is crucial
photo by TimothyJ
![Page 6: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/6.jpg)
Google is a voracious consumerof the web. And it’s blind.
photo by Ed Yourdon
![Page 7: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/7.jpg)
But accessibility isn’t only about
supporting screen readers.
![Page 8: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/8.jpg)
photo by lastquest
What if you can’t use a mouse?
![Page 9: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/9.jpg)
photo by placenamehere
What if you don’t see a change?
![Page 10: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/10.jpg)
photo by Guillermo
We can and must build better.
![Page 11: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/11.jpg)
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.
![Page 12: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/12.jpg)
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.
![Page 13: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/13.jpg)
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...
![Page 14: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/14.jpg)
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.
![Page 15: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/15.jpg)
Why ARIA?! DevChatt - March 2010
Progressive Enhancement
(x)HTML
CSS
JS
ARIA
BASIC ADVANCEDU
ser E
xper
ienc
e
Browser Capabilities
![Page 16: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/16.jpg)
photo by Saffanna
WAI-ARIA is a new(ish) tool
![Page 17: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/17.jpg)
Semantics+
![Page 18: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/18.jpg)
Map OS concepts to the web
photo by steve-uk
![Page 19: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/19.jpg)
Why ARIA?! DevChatt - March 2010
HTML
![Page 20: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/20.jpg)
Why ARIA?! DevChatt - March 2010
http://habilis.net/validator-sac/http://tinyurl.com/cwyvny
![Page 21: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/21.jpg)
photo by Verity Cridland
Call attention to important pieces
![Page 22: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/22.jpg)
Why ARIA?! DevChatt - March 2010
Structural Rolesrole="banner"
![Page 23: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/23.jpg)
Why ARIA?! DevChatt - March 2010
Structural Roles
role="main"
![Page 24: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/24.jpg)
Why ARIA?! DevChatt - March 2010
Structural Rolesrole="navigation"
![Page 25: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/25.jpg)
Why ARIA?! DevChatt - March 2010
Structural Roles
role="article"
![Page 26: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/26.jpg)
Why ARIA?! DevChatt - March 2010
Structural Roles
role="list"(but hopefully you used a ul or ol)
![Page 27: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/27.jpg)
Why ARIA?! DevChatt - March 2010
Structural Roles
role="form"
![Page 28: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/28.jpg)
Why ARIA?! DevChatt - March 2010
Structural Roles
role="complementary"
![Page 29: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/29.jpg)
Why ARIA?! DevChatt - March 2010
Structural Roles
role="contentinfo"
![Page 30: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/30.jpg)
Why ARIA?! DevChatt - March 2010
Structural Roles
role="list"
![Page 31: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/31.jpg)
Why ARIA?! DevChatt - March 2010
Structural Roles
role="listitem"
![Page 32: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/32.jpg)
Why ARIA?! DevChatt - March 2010
Structural RolesDocument Structure
Landmarksapplicationbannercomplementary
contentinfoformmain
navigationsearch
articlecolumnheaderdefinitiondirectorydocumentgroup
headingimglistlistitemmathnote
presentationregionrowrowheaderseparator
![Page 33: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/33.jpg)
photo by DavePress
Explain what something is& how it works
![Page 34: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/34.jpg)
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>
![Page 35: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/35.jpg)
Why ARIA?! DevChatt - March 2010
Widget Rolesalertalertdialogbuttoncheckboxcomboboxdialoggridcelllinklog
marqueemenuitemmenuitemcheckboxmenuitemradiooptionprogressbarradioradiogroupscrollbar
sliderspinbuttonstatustabtabpaneltextboxtimertooltiptreeitem
Widget Container Rolesgridlistboxmenu
menubartablisttoolbar
treetreegrid
![Page 36: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/36.jpg)
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
![Page 37: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/37.jpg)
photo by exfordy
Indicate what’s going on
![Page 38: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/38.jpg)
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)
![Page 39: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/39.jpg)
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>
![Page 40: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/40.jpg)
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>
![Page 41: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/41.jpg)
Why ARIA?! DevChatt - March 2010
Complex Widgets
role="application"
![Page 42: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/42.jpg)
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"
![Page 43: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/43.jpg)
Why ARIA?! DevChatt - March 2010
Complex Widgets
role="presentation"
![Page 44: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/44.jpg)
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)
![Page 45: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/45.jpg)
photo by kevin1024
Highlight “living” content
![Page 46: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/46.jpg)
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>
![Page 47: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/47.jpg)
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>
![Page 48: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/48.jpg)
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>
![Page 49: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/49.jpg)
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
![Page 50: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/50.jpg)
photo by cfpg
Manage focus with slight-of-hand
![Page 51: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/51.jpg)
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>
![Page 52: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/52.jpg)
photo by Richard Jones
Piecing it all together
![Page 53: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/53.jpg)
Why ARIA?! DevChatt - March 2010
Let’s Build a Tabbed Interface
![Page 54: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/54.jpg)
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>
![Page 55: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/55.jpg)
Why ARIA?! DevChatt - March 2010
Static HTML with no style
![Page 56: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/56.jpg)
Why ARIA?! DevChatt - March 2010
A little typography
![Page 57: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/57.jpg)
Why ARIA?! DevChatt - March 2010
Typography and color
![Page 58: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/58.jpg)
Why ARIA?! DevChatt - March 2010
Taking another look
![Page 59: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/59.jpg)
Why ARIA?! DevChatt - March 2010
Taking another look
.tabbed
![Page 60: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/60.jpg)
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>
![Page 61: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/61.jpg)
Why ARIA?! DevChatt - March 2010
Understanding the flow
Page
JS?
Split the content & make
some tabs
NoYes
![Page 62: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/62.jpg)
Why ARIA?! DevChatt - March 2010
Mouse-based interaction
![Page 63: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/63.jpg)
Why ARIA?! DevChatt - March 2010
Assigning ARIA Roles
role="application"aria-activedescendant="folder-1"
![Page 64: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/64.jpg)
Why ARIA?! DevChatt - March 2010
Assigning ARIA Roles
role="tabpanel"aria-hidden="false"aria-labelledby="folder-1-tab"
![Page 65: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/65.jpg)
Why ARIA?! DevChatt - March 2010
Assigning ARIA Rolesrole="tablist"
![Page 66: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/66.jpg)
Why ARIA?! DevChatt - March 2010
Assigning ARIA Rolesrole="tab"aria-selected="false"aria-describedby="folder-4"
![Page 67: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/67.jpg)
Why ARIA?! DevChatt - March 2010
Assigning ARIA Rolesrole="tab"aria-selected="true"aria-describedby="folder-1"
![Page 68: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/68.jpg)
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 );}
![Page 69: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/69.jpg)
Why ARIA?! DevChatt - March 2010
Enabling the keyboardtab.onclick = swap;tab.onkeydown = moveFocus;tab.onfocus = swap;
![Page 70: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/70.jpg)
Why ARIA?! DevChatt - March 2010
tabindex="0"
Enabling the keyboard
![Page 71: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/71.jpg)
Why ARIA?! DevChatt - March 2010
tabindex="-1"
Enabling the keyboard
![Page 72: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/72.jpg)
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 ); }}
![Page 73: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/73.jpg)
Why ARIA?! DevChatt - March 2010
Enabling the keyboardfunction getTab( tab ){ while ( tab.nodeName.toLowerCase() != 'li' ) { tab = tab.parentNode; } return tab;}
![Page 74: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/74.jpg)
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; } // ...}
![Page 75: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/75.jpg)
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(); } }}
![Page 76: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/76.jpg)
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' ); // ...}
![Page 77: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/77.jpg)
Why ARIA?! DevChatt - March 2010
The Fruit (Pie) of Our Labor
![Page 78: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/78.jpg)
Why ARIA?! DevChatt - March 2010
Who is Supporting WAI-ARIA?
![Page 79: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/79.jpg)
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/
![Page 80: Why ARIA? [DevChatt 2010]](https://reader033.vdocuments.net/reader033/viewer/2022051819/54c70ca74a79593b3d8b45c8/html5/thumbnails/80.jpg)
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