Top Banner
Aaron Gustafson Progressive Enhancement with ARIA
94

Progressive Enhancement with ARIA [Accessibility Summit 2010]

Jan 27, 2015

Download

Technology

Aaron Gustafson

If you've been paying attention for the last few years, you're likely well-versed in progressive enhancement and it's content-out approach to web design, but you may be less familiar with the Accessible Rich Internet Applications spec and how you can leverage its enhanced semantics to provide a truly accessible experience.

In this session, we'll cover the following:

* Discuss progressive enhancement and where ARIA fits into the mix
* Examine how ARIA's landmark roles can provide additional clues as to document structure
* Look at the various roles and states ARIA defines for building accessible widgets
* Cover how to leverage tabindex in an effort to create a better overall experience when using the keyboard
* Walk through the construction of an ARIA-enabled widget, from markup to scripting, following the progressive enhancement process
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Progressive Enhancement with ARIA [Accessibility Summit 2010]

Aaron Gustafson

Progressive Enhancement

with ARIA

Page 2: Progressive Enhancement with ARIA [Accessibility Summit 2010]

We are creating richer online experiences

2

Page 3: Progressive Enhancement with ARIA [Accessibility Summit 2010]

3

Page 4: Progressive Enhancement with ARIA [Accessibility Summit 2010]

...and the barrierswhich prohibit them.

photo by drcorneilus 4

Page 5: Progressive Enhancement with ARIA [Accessibility Summit 2010]

Accessibility is crucial

photo by TimothyJ 5

Page 6: Progressive Enhancement with ARIA [Accessibility Summit 2010]

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]

But accessibility isn’t only about

supporting screen readers.

7

Page 8: Progressive Enhancement with ARIA [Accessibility Summit 2010]

photo by lastquest

What if you can’t use a mouse?

8

Page 9: Progressive Enhancement with ARIA [Accessibility Summit 2010]

photo by placenamehere

What if you don’t see a change?9

Page 10: Progressive Enhancement with ARIA [Accessibility Summit 2010]

photo by Guillermo

We can and must build better.

10

Page 11: Progressive Enhancement with ARIA [Accessibility Summit 2010]

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]

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]

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]

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]

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]

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]

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]

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]

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]

photo by Saffanna

WAI-ARIA is a new(ish) tool

17

Page 21: Progressive Enhancement with ARIA [Accessibility Summit 2010]

Semantics+

18

Page 22: Progressive Enhancement with ARIA [Accessibility Summit 2010]

Map OS concepts to the web

photo by steve-uk 19

Page 23: Progressive Enhancement with ARIA [Accessibility Summit 2010]

Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010

HTML

20

Page 24: Progressive Enhancement with ARIA [Accessibility Summit 2010]

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]

photo by Verity Cridland

Call attention to important pieces21

Page 26: Progressive Enhancement with ARIA [Accessibility Summit 2010]

Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010

Structural Roles

22

Page 27: Progressive Enhancement with ARIA [Accessibility Summit 2010]

Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010

Structural Roles

role="banner"

23

Page 28: Progressive Enhancement with ARIA [Accessibility Summit 2010]

Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010

Structural Roles

role="main"

24

Page 29: Progressive Enhancement with ARIA [Accessibility Summit 2010]

Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010

Structural Roles

role="article"

25

Page 30: Progressive Enhancement with ARIA [Accessibility Summit 2010]

Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010

Structural Roles

role="complementary"

26

Page 31: Progressive Enhancement with ARIA [Accessibility Summit 2010]

Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010

Structural Roles

role="list"

27

Page 32: Progressive Enhancement with ARIA [Accessibility Summit 2010]

Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010

Structural Roles

role="list"

28

Page 33: Progressive Enhancement with ARIA [Accessibility Summit 2010]

Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010

Structural Roles

role="list"

29

Page 34: Progressive Enhancement with ARIA [Accessibility Summit 2010]

Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010

Structural Roles

role="list"

30

Page 35: Progressive Enhancement with ARIA [Accessibility Summit 2010]

Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010

Structural Roles

role="listitem"

31

Page 36: Progressive Enhancement with ARIA [Accessibility Summit 2010]

Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010

Structural Roles

role="form"

32

Page 37: Progressive Enhancement with ARIA [Accessibility Summit 2010]

Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010

Structural Roles

role="article"

33

Page 38: Progressive Enhancement with ARIA [Accessibility Summit 2010]

Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010

Structural Roles

role="contentinfo"

34

Page 39: Progressive Enhancement with ARIA [Accessibility Summit 2010]

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]

photo by DavePress

Explain what something is& how it works

36

Page 41: Progressive Enhancement with ARIA [Accessibility Summit 2010]

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]

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]

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]

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]

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]

photo by exfordy

Indicate what’s going on

40

Page 47: Progressive Enhancement with ARIA [Accessibility Summit 2010]

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]

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]

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]

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]

Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010

Complex Widgets

42

Page 52: Progressive Enhancement with ARIA [Accessibility Summit 2010]

Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010

Complex Widgets

role="application"

42

Page 53: Progressive Enhancement with ARIA [Accessibility Summit 2010]

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]

Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010

Complex Widgets

role="presentation"

42

Page 55: Progressive Enhancement with ARIA [Accessibility Summit 2010]

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]

photo by kevin1024

Highlight “living” content44

Page 57: Progressive Enhancement with ARIA [Accessibility Summit 2010]

Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010

Live Regions

45

Page 58: Progressive Enhancement with ARIA [Accessibility Summit 2010]

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]

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]

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]

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]

photo by cfpg

Manage focus with slight-of-hand

50

Page 63: Progressive Enhancement with ARIA [Accessibility Summit 2010]

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]

photo by Richard Jones

Piecing it all together52

Page 65: Progressive Enhancement with ARIA [Accessibility Summit 2010]

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]

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]

Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010

Static HTML with no style

55

Page 68: Progressive Enhancement with ARIA [Accessibility Summit 2010]

Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010

A little typography

56

Page 69: Progressive Enhancement with ARIA [Accessibility Summit 2010]

Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010

Typography and color

57

Page 70: Progressive Enhancement with ARIA [Accessibility Summit 2010]

Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010

Taking another look

58

Page 71: Progressive Enhancement with ARIA [Accessibility Summit 2010]

Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010

Taking another look

.tabbed58

Page 72: Progressive Enhancement with ARIA [Accessibility Summit 2010]

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]

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]

Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010

Mouse-based interaction

61

Page 75: Progressive Enhancement with ARIA [Accessibility Summit 2010]

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]

Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010

Assigning ARIA Rolesrole="tablist"

63

Page 77: Progressive Enhancement with ARIA [Accessibility Summit 2010]

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]

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]

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]

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]

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]

Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010

Enabling the keyboard

69

Page 83: Progressive Enhancement with ARIA [Accessibility Summit 2010]

Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010

tabindex="-1"

Enabling the keyboard

69

Page 84: Progressive Enhancement with ARIA [Accessibility Summit 2010]

Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010

tabindex="0"

Enabling the keyboard

69

Page 85: Progressive Enhancement with ARIA [Accessibility Summit 2010]

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]

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]

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]

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]

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]

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]

Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010

Who is Supporting WAI-ARIA?

76

Page 92: Progressive Enhancement with ARIA [Accessibility Summit 2010]

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]

Aaron Gustafson

Progressive Enhancement

with ARIA

Page 94: Progressive Enhancement with ARIA [Accessibility Summit 2010]

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