Progressive Enhancement with ARIA [WebVisions 2011]

PROGRESSIVE ENHANCEMENTwith ARIA

?

<button>Tweet</button>

<button>Tweet</button><a class=”button”>Tweet</a>

?

<button>Search Mail</button>

<button>Search Mail</button><div>Search Mail</div>

WebAccessibilityInitiative

Accessible RichInternet Applications

Content

XHTML

CSS

JavaScript

Content

XHTML

CSS

JavaScript

ARIA

<header role="banner">

<nav role="navigation">

<div role="main">

<a class=”button”>Tweet</a>

<a role=”button”>Tweet</a>

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

role="tablist"

role="tab"aria-selected="true"aria-controls="folder-1"

role="tab"aria-selected="false"aria-controls="folder-4"

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

<input class="tweet-counter" value="137" disabled="disabled">

<span class="tweet-counter"> <strong class="char-counter">137</strong></span>

<span class="tweet-counter">137 <b class="hidden"> characters remaining </b></span>

<span class="tweet-counter">maximum of 140 characters</span>

<span class="tweet-counter">maximum of 140 characters</span>

<span class="tweet-counter">137 <b class="hidden"> characters remaining </b></span>

<span aria-live="polite" aria-atomic="true" class="tweet-counter"> 137<b class="hidden"> characters remaining</b></span>

Progressive Enhancement with ARIAby Aaron Gustafson

More of the same:http://adaptivewebdesign.info

http://easy-designs.nethttp://easy-reader.net

http://aaron-gustafson.com

Slides available athttp://slideshare.net/AaronGustafson

This presentation is licensed underCreative Commons

Attribution-Noncommercial-Share Alike 3.0

flickr Photo Credits“Dual Samsung Monitors” by steve-uk

“Statue of liberty” by gadl“Lego creation” by MiikaS

“Green Plant” by kevin1024