Progressive Enhancement with ARIA [Accessibility Summit 2010]
-
Upload
aaron-gustafson -
Category
Technology
-
view
110 -
download
0
description
Transcript of Progressive Enhancement with ARIA [Accessibility Summit 2010]
![Page 1: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/1.jpg)
Aaron Gustafson
Progressive Enhancement
with ARIA
![Page 2: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/2.jpg)
We are creating richer online experiences
2
![Page 3: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/3.jpg)
3
![Page 4: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/4.jpg)
...and the barrierswhich prohibit them.
photo by drcorneilus 4
![Page 5: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/5.jpg)
Accessibility is crucial
photo by TimothyJ 5
![Page 6: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/6.jpg)
Google is a voracious consumerof the web. And it’s blind.
photo by Ed Yourdon 6
![Page 7: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/7.jpg)
But accessibility isn’t only about
supporting screen readers.
7
![Page 8: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/8.jpg)
photo by lastquest
What if you can’t use a mouse?
8
![Page 9: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/9.jpg)
photo by placenamehere
What if you don’t see a change?9
![Page 10: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/10.jpg)
photo by Guillermo
We can and must build better.
10
![Page 11: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/11.jpg)
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
![Page 12: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/12.jpg)
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Building betterSemantics (markup) convey the underlying meaning of the content...
Text & HTTP
(x)HTML
12
![Page 13: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/13.jpg)
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
![Page 14: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/14.jpg)
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Building betterCSS can enhance usability through visual clues...
Text & HTTP
(x)HTML
CSS
13
![Page 15: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/15.jpg)
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
![Page 16: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/16.jpg)
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
![Page 17: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/17.jpg)
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
![Page 18: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/18.jpg)
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
![Page 19: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/19.jpg)
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
![Page 20: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/20.jpg)
photo by Saffanna
WAI-ARIA is a new(ish) tool
17
![Page 21: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/21.jpg)
Semantics+
18
![Page 22: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/22.jpg)
Map OS concepts to the web
photo by steve-uk 19
![Page 23: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/23.jpg)
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
HTML
20
![Page 24: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/24.jpg)
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
http://habilis.net/validator-sac/http://tinyurl.com/cwyvny
20
![Page 25: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/25.jpg)
photo by Verity Cridland
Call attention to important pieces21
![Page 26: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/26.jpg)
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Structural Roles
22
![Page 27: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/27.jpg)
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Structural Roles
role="banner"
23
![Page 28: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/28.jpg)
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Structural Roles
role="main"
24
![Page 29: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/29.jpg)
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Structural Roles
role="article"
25
![Page 30: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/30.jpg)
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Structural Roles
role="complementary"
26
![Page 31: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/31.jpg)
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Structural Roles
role="list"
27
![Page 32: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/32.jpg)
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Structural Roles
role="list"
28
![Page 33: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/33.jpg)
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Structural Roles
role="list"
29
![Page 34: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/34.jpg)
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Structural Roles
role="list"
30
![Page 35: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/35.jpg)
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Structural Roles
role="listitem"
31
![Page 36: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/36.jpg)
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Structural Roles
role="form"
32
![Page 37: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/37.jpg)
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Structural Roles
role="article"
33
![Page 38: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/38.jpg)
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Structural Roles
role="contentinfo"
34
![Page 39: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/39.jpg)
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Structural RolesDocument Structure
Landmarksapplicationbannercomplementary
contentinfoformmain
navigationsearch
articlecolumnheaderdefinitiondirectorydocumentgroup
headingimglistlistitemmathnote
presentationregionrowrowheaderseparator
35
![Page 40: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/40.jpg)
photo by DavePress
Explain what something is& how it works
36
![Page 41: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/41.jpg)
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
![Page 42: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/42.jpg)
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
![Page 43: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/43.jpg)
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
![Page 44: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/44.jpg)
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Widget Rolesalertalertdialogbuttoncheckboxcomboboxdialoggridcelllinklog
marqueemenuitemmenuitemcheckboxmenuitemradiooptionprogressbarradioradiogroupscrollbar
sliderspinbuttonstatustabtabpaneltextboxtimertooltiptreeitem
Widget Container Rolesgridlistboxmenu
menubartablisttoolbar
treetreegrid
38
![Page 45: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/45.jpg)
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
![Page 46: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/46.jpg)
photo by exfordy
Indicate what’s going on
40
![Page 47: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/47.jpg)
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Widget States
B(off)
B(on)
41
![Page 48: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/48.jpg)
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
![Page 49: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/49.jpg)
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
![Page 50: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/50.jpg)
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
![Page 51: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/51.jpg)
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Complex Widgets
42
![Page 52: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/52.jpg)
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Complex Widgets
role="application"
42
![Page 53: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/53.jpg)
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
![Page 54: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/54.jpg)
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Complex Widgets
role="presentation"
42
![Page 55: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/55.jpg)
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
![Page 56: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/56.jpg)
photo by kevin1024
Highlight “living” content44
![Page 57: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/57.jpg)
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Live Regions
45
![Page 58: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/58.jpg)
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
![Page 59: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/59.jpg)
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
![Page 60: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/60.jpg)
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
![Page 61: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/61.jpg)
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
![Page 62: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/62.jpg)
photo by cfpg
Manage focus with slight-of-hand
50
![Page 63: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/63.jpg)
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
![Page 64: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/64.jpg)
photo by Richard Jones
Piecing it all together52
![Page 65: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/65.jpg)
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Let’s Build a Tabbed Interface
53
![Page 66: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/66.jpg)
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
![Page 67: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/67.jpg)
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Static HTML with no style
55
![Page 68: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/68.jpg)
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
A little typography
56
![Page 69: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/69.jpg)
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Typography and color
57
![Page 70: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/70.jpg)
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Taking another look
58
![Page 71: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/71.jpg)
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Taking another look
.tabbed58
![Page 72: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/72.jpg)
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
![Page 73: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/73.jpg)
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Understanding the flow
Page
JS?
Split the content & make
some tabs
NoYes
60
![Page 74: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/74.jpg)
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Mouse-based interaction
61
![Page 75: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/75.jpg)
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Assigning ARIA Roles
role="application"aria-activedescendant="folder-1"
62
![Page 76: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/76.jpg)
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Assigning ARIA Rolesrole="tablist"
63
![Page 77: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/77.jpg)
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Assigning ARIA Rolesrole="tab"aria-selected="true"aria-controls="folder-1"
64
![Page 78: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/78.jpg)
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Assigning ARIA Rolesrole="tab"aria-selected="false"aria-controls="folder-4"
65
![Page 79: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/79.jpg)
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Assigning ARIA Roles
role="tabpanel"aria-hidden="false"aria-labelledby="folder-1-tab"
66
![Page 80: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/80.jpg)
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
![Page 81: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/81.jpg)
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Enabling the keyboardtab.onclick = swap;tab.onkeydown = moveFocus;tab.onfocus = swap;
68
![Page 82: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/82.jpg)
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Enabling the keyboard
69
![Page 83: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/83.jpg)
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
tabindex="-1"
Enabling the keyboard
69
![Page 84: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/84.jpg)
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
tabindex="0"
Enabling the keyboard
69
![Page 85: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/85.jpg)
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
![Page 86: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/86.jpg)
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
![Page 87: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/87.jpg)
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
![Page 88: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/88.jpg)
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
![Page 89: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/89.jpg)
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
![Page 90: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/90.jpg)
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
The Fruit (Pie) of Our Labor
75
![Page 91: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/91.jpg)
Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010
Who is Supporting WAI-ARIA?
76
![Page 92: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/92.jpg)
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
![Page 93: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/93.jpg)
Aaron Gustafson
Progressive Enhancement
with ARIA
![Page 94: Progressive Enhancement with ARIA [Accessibility Summit 2010]](https://reader033.fdocuments.us/reader033/viewer/2022051412/54c70c954a79593b3d8b45c6/html5/thumbnails/94.jpg)
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