Progressive Enhancement with ARIA [WebVisions 2011]
-
Upload
aaron-gustafson -
Category
Technology
-
view
113 -
download
1
description
Transcript of 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