Your SlideShare is downloading. ×
0

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Progressive Enhancement with ARIA [WebVisions 2011]

2,340

Published on

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 …

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.

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,340
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
31
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. PROGRESSIVEENHANCEMENT 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. WebAccessibilityInitiative
  • 9. AccessibleRichInternetApplications
  • 10. JavaScript CSS XHTMLContent
  • 11. ARIAJavaScript CSS XHTMLContent
  • 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 flickr Photo Credits “Dual Samsung Monitors” by steve-uk “Statue of liberty” by gadl “Lego creation” by MiikaS “Green Plant” by kevin1024

×