esigning 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.

1. PROGRESSIVE
ENHANCEMENT
with ARIA

4. ?

5. <button>Tweet</button>

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

8. ?

9. <button>Search Mail</button>

10. <button>Search Mail</button>
<div>Search Mail</div>

11. Web
Accessibility
Initiative

12. Accessible
Rich
Internet
Applications

14. JavaScript
CSS
XHTML
Content

15. ARIA
JavaScript
CSS
XHTML
Content

18. <header role="banner">

19. <nav role="navigation">

20. <div role="main">

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

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

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

26. role="tablist"

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

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

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

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

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

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

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

37. <span class="tweet-counter">maximum of
140 characters</span>
<span class="tweet-counter">137
<b class="hidden"> characters remaining
</b></span>

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

39. Progressive Enhancement
with ARIA
by Aaron Gustafson
More of the same:
http://adaptivewebdesign.info
http://easy-designs.net
http://easy-reader.net
http://aaron-gustafson.com
Slides available at
http://slideshare.net/AaronGustafson
This presentation is licensed under
Creative 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