Top Banner
Aaron Gustafson Progressive Enhancement with ARIA
89

Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Jan 27, 2015

Download

Technology

Aaron Gustafson

Designing and developing with accessibility in mind has numerous benefits: it makes your website usable by everyone, it makes your content inherently more search engine friendly, and it makes providing context-sensitive interfaces (e.g. mobile) even easier. In this session, Aaron Gustafson will provide you with a quick refresher on progressive enhancement and show you where the Web Accessibility Initiative's Accessible Rich Internet Applications (WAI-ARIA) spec fits into it all. Throughout the talk, Aaron will provide numerous examples of how to weave ARIA into your projects and how to use ARIA, in concert with JavaScript, to dramatically enhance the usability of client-side widgets.
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 [Carsonified HTML & CSS Online Conference]

Aaron Gustafson

Progressive Enhancement

with ARIA

Page 2: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

We are creating richer online experiences

Page 3: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]
Page 4: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

...and the barrierswhich prohibit them.

photo by drcorneilus

Page 5: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Aaron Gustafson

Accessibility is crucial

photo by TimothyJ

Page 6: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Google is a voracious consumerof the web. And it’s blind.

photo by Ed Yourdon

Page 7: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

But accessibility isn’t only about

supporting screen readers.

Page 8: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

photo by lastquest

What if you can’t use a mouse?

Page 9: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

photo by placenamehere

What if you don’t see a change?

Page 10: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

photo by Guillermo

We can and must build better.

Page 11: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Building betterEvery great experience on the web begins with two key things: clear, well-written prose and the HTTP protocol.

Text & HTTP

Page 12: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Building betterSemantics (markup) convey the underlying meaning of the content...but if poorly applied, meaning can be obscured.

Text & HTTP

(x)HTML

Page 13: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Building betterCSS can enhance usability through visual clues...but it can also reduce accessibility if misused.

Text & HTTP

(x)HTML

CSS

Page 14: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Building better

but it cannot be relied on 100% of the time.

JavaScript can be used to build more intuitive interfaces...

Text & HTTP

(x)HTML

CSS

JavaScript

Page 15: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Building betterWAI-ARIA extends the semantics of the document to provide additional insight into the state of the interface and how to interact with it.

Text & HTTP

(x)HTML

CSS

JavaScript

ARIA

Page 16: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Progressive Enhancement

BASIC ADVANCEDU

ser E

xper

ienc

e

Browser Capabilities

Text & HTTP

(x)HTML

CSS

JavaScript

ARIA

Page 17: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

photo by Saffanna

WAI-ARIA is a new(ish) tool

Page 18: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Semantics+

Page 19: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Map OS concepts to the web

photo by steve-uk

Page 20: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

HTML

Page 21: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

HTML

Page 22: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

http://habilis.net/validator-sac/http://tinyurl.com/cwyvny

Page 23: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

photo by Verity Cridland

Call attention to important pieces

Page 24: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Structural Roles

Page 25: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Structural Roles

role="banner"

Page 26: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Structural Roles

role="main"

Page 27: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Structural Rolesrole="navigation"

Page 28: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Structural Roles

role="article"

Page 29: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Structural Roles

role="complementary"

Page 30: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Structural Roles

role="list"

Page 31: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Structural Roles

role="listitem"

Page 32: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Structural Roles

Page 33: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Structural Roles

role="form"

Page 34: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Structural Roles

role="contentinfo"

Page 35: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Structural RolesDocument Structure

Landmarksapplicationbannercomplementary

contentinfoformmain

navigationsearch

articlecolumnheaderdefinitiondirectorydocumentgroup

headingimglistlistitemmathnote

presentationregionrowrowheaderseparator

Page 36: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

photo by DavePress

Explain what something is& how it works

Page 37: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Widget Roles<span role="button">OK</span>(of course <button>OK</button> would be better)

<div role="alert"> <p>Something went wrong.</p></div>

<div role="alertdialog"> <p>Something went wrong.</p> <img src="x.png" alt="dismiss" role="button" /></div>

Page 38: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Widget Rolesalertalertdialogbuttoncheckboxcomboboxdialoggridcelllinklog

marqueemenuitemmenuitemcheckboxmenuitemradiooptionprogressbarradioradiogroupscrollbar

sliderspinbuttonstatustabtabpaneltextboxtimertooltiptreeitem

Widget Container Rolesgridlistboxmenu

menubartablisttoolbar

treetreegrid

Page 39: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Widget Propertiesaria-activedescendantaria-atomicaria-autocompletearia-controlsaria-describedbyaria-dropeffectaria-flowtoaria-haspopuparia-labelaria-labelledbyaria-levelaria-live

aria-multilinearia-multiselectablearia-orientationaria-ownsaria-posinsetaria-readonlyaria-relevant aria-requiredaria-setsizearia-sortaria-valuemaxaria-valuemin

Page 40: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

photo by exfordy

Indicate what’s going on

Page 41: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Widget States

<button> <img src="bold-on.png" alt="bold" /></button>

<button> <img src="bold-off.png" alt="bold" /></button>

B(off)

B(on)

Page 42: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Widget States

B(off)

B(on)

<button> <img src="bold-on.png" alt="bold" /></button>

<button> <img src="bold-off.png" alt="not bold" /></button>

Page 43: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Widget States

B(off)

B(on)

<button role="button" aria-pressed="true"> <img src="bold-on.png" alt="bold" /></button>

<button role="button" aria-pressed="false"> <img src="bold-off.png" alt="not bold" /></button>

Page 44: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Complex Widgets

Page 45: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Complex Widgets

role="application"

Page 46: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Complex Widgets

role="slider"aria-labelledby="label_handle_valueA"aria-valuemin="0"aria-valuemax="71"aria-valuenow="22"aria-valuetext="Apr 04"

Page 47: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Complex Widgets

role="presentation"

Page 48: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Widget Statesaria-busyaria-checkedaria-disabledaria-expandedaria-grabbedaria-hiddenaria-invalidaria-pressedaria-selectedaria-valuenow (the W3C defines this as a “property”)aria-valuetext (ditto)

Page 49: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

photo by kevin1024

Highlight “living” content

Page 50: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Live Regions

Page 51: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Live Regions

Page 52: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Live Regions

<span id="chars_left_notice" class="numeric"> <strong id="status-field-char-counter" class="char-counter">140</strong></span>

Page 53: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Live Regions

<span id="chars_left_notice" class="numeric" aria-live="polite"> <strong id="status-field-char-counter" class="char-counter">140</strong></span>

Page 54: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Live Regions

<span id="chars_left_notice" class="numeric" aria-live="polite"> <strong id="status-field-char-counter" class="char-counter">140</strong> characters left</span>

Page 55: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Notification Optionsoffchange not announced

politechange announced after user completes her current activity

assertiveuser agent should interrupt the user’s activity, but not immediately

rudeuser agent should interrupt the user’s activity immediately

Page 56: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

photo by cfpg

Manage focus with slight-of-hand

Page 57: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

tabindex helps manage focus<div tabindex="0"> <p>This <code>div</code> can now receive focus using a keyboard’s <kbd>tab</kbd> key. How cool is that?</p></div><div tabindex="-1"> <p>This <code>div</code> won’t be focused by a user via the <kbd>tab</kbd> key, but JavaScript can <code>focus()</code> it. Nifty, huh?</p></div>

Page 58: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

photo by Richard Jones

Piecing it all together

Page 59: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Let’s Build a Tabbed Interface

Page 60: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Traditional approach<h1>Pumpkin Pie</h1><div class="container"> <div class="section"> <h2>Overview</h2> <img src="pie.jpg" alt=""> <p>Whether you're hosting a festive party or a casual get-together with friends, our Pumpkin Pie will make entertaining easy!</p> ... </div> ... <ul class="tabs"> <li><a href="#">Overview</a></li> <li><a href="#">Ingredients</a></li> <li><a href="#">Directions</a></li> <li><a href="#">Nutrition</a></li> </ul></div>

Page 61: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Static HTML with no style

Page 62: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

A little typography

Page 63: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Typography and color

Page 64: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Taking another look

Page 65: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Taking another look

.tabbed

Page 66: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Required source<h1>Pumpkin Pie</h1><div class="tabbed"> <h2>Overview</h2> <img src="pie.jpg" alt="" /> <p>Whether you're hosting a festive party or a casual get-together with friends, our Pumpkin Pie will make entertaining easy!</p> ... <h2>Ingredients</h2> <ul> <li>1 (9<abbr title="inch">in</abbr>) unbaked deep dish pie crust</li> <li>½ cup white sugar</li> ... </ul> <h2>Directions</h2> ...</div>

Page 67: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Understanding the flow

Page

JS?

Split the content & make

some tabs

NoYes

Page 68: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Mouse-based interaction

Page 69: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Assigning ARIA Roles

Page 70: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Assigning ARIA Roles

role="application"aria-activedescendant="folder-1"

Page 71: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Assigning ARIA Roles

role="tabpanel"aria-hidden="false"aria-labelledby="folder-1-tab"

Page 72: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Assigning ARIA Rolesrole="tablist"

Page 73: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Assigning ARIA Rolesrole="tab"aria-selected="false"aria-describedby="folder-4"

Page 74: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Assigning ARIA Rolesrole="tab"aria-selected="true"aria-describedby="folder-1"

Page 75: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Updating states and propertiestab.onclick = swap;

// ...

function swap( e ){ // ... old_tab.setAttribute( 'aria-selected', 'false' ); // ... tab.setAttribute( 'aria-selected', 'true' ); // ... old_folder.setAttribute( 'aria-hidden', 'true' ); // ... new_folder.setAttribute( 'aria-hidden', 'false' ); // ... _cabinet.setAttribute( 'aria-activedescendant', _active );}

Page 76: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Enabling the keyboardtab.onclick = swap;tab.onkeydown = moveFocus;tab.onfocus = swap;

Page 77: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Enabling the keyboard

Page 78: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

tabindex="-1"

Enabling the keyboard

Page 79: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

tabindex="0"

Enabling the keyboard

Page 80: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Enabling the keyboardfunction moveFocus( e ) { e = ( e ) ? e : event; var tab = e.target || e.srcElement, key = e.keyCode || e.charCode, pass = true; tab = getTab( tab ); // keyboard handling goes here if ( ! pass ) { return cancel( e ); }}

Page 81: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Enabling the keyboardfunction getTab( tab ){ while ( tab.nodeName.toLowerCase() != 'li' ) { tab = tab.parentNode; } return tab;}

Page 82: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Enabling the keyboardfunction moveFocus( e ) { // ... switch ( key ) { case 37: // left arrow case 38: // up arrow move( tab, 'previous', false ); pass = false; break; // down (39), right (40), home (36), end (35) // should be added here case 27: // escape tab.blur(); pass = false; break; } // ...}

Page 83: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Enabling the keyboardfunction move( tab, direction, complete ) { if ( complete ) { if ( direction == 'previous' ) { tab.parentNode.childNodes[0].focus(); } else { tab.parentNode .childNodes[tab.parentNode .childNodes.length-1].focus(); } } else { var target = direction == 'previous' ? tab.previousSibling : tab.nextSibling; if ( target ) { target.focus(); } }}

Page 84: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Enabling the keyboardfunction swap( e ){ // ... old_tab.setAttribute( 'aria-selected', 'false' ); old_tab.setAttribute( 'tabindex', '-1' ); // ... tab.setAttribute( 'aria-selected', 'true' ); tab.setAttribute( 'tabindex', '0' ); // ... old_folder.setAttribute( 'aria-hidden', 'true' ); old_folder.setAttribute( 'tabindex', '-1' ); // ... new_folder.setAttribute( 'aria-hidden', 'false' ); new_folder.setAttribute( 'tabindex', '0' ); // ...}

Page 85: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

The Fruit (Pie) of Our Labor

Page 86: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Who is Supporting WAI-ARIA?

Page 87: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

For MoreWAI-ARIA Specw3.org/TR/wai-aria/

WAI-ARIA Support in Browserspaciellogroup.com/blog/aria-tests/ARIA-SafariaOperaIEFF.html

TabInterfaceeasy-designs.github.com/tabinterface.js/

Page 88: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Aaron Gustafson

Progressive Enhancement

with ARIA

Page 89: Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010

Slides available athttp://slideshare.net/AaronGustafson

This presentation is licensed underCreative Commons

Attribution-Noncommercial-Share Alike 3.0

flickr Photo Credits“ferris wheel? not yet...” by drcorneilus

“Hunter Museum” by TimothyJ“No, I don't need any help - I'm…” by Ed Yourdon

“The almighty mouse” by lastquest“wii browser - zoomed in” by placenamehere

“Legospective” by Guillermо“I love my toolbox 15 July Scavenger Hunt” by Saffanna

“Dual Samsung Monitors” by steve-uk“Keystone of the Monumental Arch,…” by Verity Cridland

“Lego” by DavePress“iFlickr touch screen” by exfordy

“Green Plant” by kevin1024“Cartas” by cfpg

“Lego Millenium Falcon” by Richard Jones