1 / 39

Progressive Enhancement with ARIA [WebVisions 2011]

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.

AaronGustafson
Download Presentation

Progressive Enhancement with ARIA [WebVisions 2011]

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. PROGRESSIVE ENHANCEMENT with ARIA

  2. ?

  3. <button>Tweet</button>

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

  5. ?

  6. <button>Search Mail</button>

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

  8. Web Accessibility Initiative

  9. Accessible Rich Internet Applications

  10. JavaScript CSS XHTML Content

  11. ARIA JavaScript CSS XHTML Content

  12. <header role="banner">

  13. <nav role="navigation">

  14. <div role="main">

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

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

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

  18. role="tablist"

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

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

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

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

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

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

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

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

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

  28. 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 flickrPhoto Credits “Dual Samsung Monitors” by steve-uk “Statue of liberty” by gadl “Lego creation” by MiikaS “Green Plant” by kevin1024

More Related