1 / 89

Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Designing 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 [Carsonified HTML & CSS Online Conference]

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 Aaron Gustafson

  2. We are creating richer online experiences

  3. ...and the barriers which prohibit them. photo by drcorneilus

  4. Accessibility is crucial Aaron Gustafson photo by TimothyJ

  5. Google is a voracious consumer of the web. And it’s blind. photo by Ed Yourdon

  6. But accessibility isn’t only about supporting screen readers.

  7. What if you can’t use a mouse? photo by lastquest

  8. What if you don’t see a change? photo by placenamehere

  9. We can and must build better. photo by Guillermo

  10. Progressive Enhancement with ARIA? Building better ThinkVitamin Presents... HTML & CSS — August 2010 Every great experience on the web begins with two key things: clear, well-written prose and the HTTP protocol. Text & HTTP

  11. Progressive Enhancement with ARIA? Building better ThinkVitamin Presents... HTML & CSS — August 2010 Semantics (markup) convey the underlying meaning of the content... but if poorly applied, meaning can be obscured. (x)HTML Text & HTTP

  12. Progressive Enhancement with ARIA? Building better ThinkVitamin Presents... HTML & CSS — August 2010 CSS can enhance usability through visual clues... but it can also reduce accessibility if misused. CSS (x)HTML Text & HTTP

  13. Progressive Enhancement with ARIA? Building better ThinkVitamin Presents... HTML & CSS — August 2010 JavaScript can be used to build more intuitive interfaces... but it cannot be relied on 100% of the time. JavaScript CSS (x)HTML Text & HTTP

  14. Progressive Enhancement with ARIA? Building better ThinkVitamin Presents... HTML & CSS — August 2010 WAI-ARIA extends the semantics of the document to provide additional insight into the state of the interface and how to interact with it. ARIA JavaScript CSS (x)HTML Text & HTTP

  15. Progressive Enhancement with ARIA? Progressive Enhancement ThinkVitamin Presents... HTML & CSS — August 2010 ARIA User Experience JavaScript CSS BASIC ADVANCED Browser Capabilities (x)HTML Text & HTTP

  16. WAI-ARIA is a new(ish) tool photo by Saffanna

  17. Semantics+

  18. Map OS concepts to the web photo by steve-uk

  19. Progressive Enhancement with ARIA? ThinkVitamin Presents... HTML & CSS — August 2010 HTML

  20. Progressive Enhancement with ARIA? ThinkVitamin Presents... HTML & CSS — August 2010 HTML

  21. Progressive Enhancement with ARIA? ThinkVitamin Presents... HTML & CSS — August 2010 http://tinyurl.com/cwyvny http://habilis.net/validator-sac/

  22. Call attention to important pieces photo by Verity Cridland

  23. Progressive Enhancement with ARIA? Structural Roles ThinkVitamin Presents... HTML & CSS — August 2010

  24. Progressive Enhancement with ARIA? Structural Roles ThinkVitamin Presents... HTML & CSS — August 2010 role="banner"

  25. Progressive Enhancement with ARIA? Structural Roles ThinkVitamin Presents... HTML & CSS — August 2010 role="main"

  26. Progressive Enhancement with ARIA? Structural Roles ThinkVitamin Presents... HTML & CSS — August 2010 role="navigation"

  27. Progressive Enhancement with ARIA? Structural Roles ThinkVitamin Presents... HTML & CSS — August 2010 role="article"

  28. Progressive Enhancement with ARIA? Structural Roles ThinkVitamin Presents... HTML & CSS — August 2010 role="complementary"

  29. Progressive Enhancement with ARIA? Structural Roles ThinkVitamin Presents... HTML & CSS — August 2010 role="list"

  30. Progressive Enhancement with ARIA? Structural Roles ThinkVitamin Presents... HTML & CSS — August 2010 role="listitem"

  31. Progressive Enhancement with ARIA? Structural Roles ThinkVitamin Presents... HTML & CSS — August 2010

  32. Progressive Enhancement with ARIA? Structural Roles ThinkVitamin Presents... HTML & CSS — August 2010 role="form"

  33. Progressive Enhancement with ARIA? Structural Roles ThinkVitamin Presents... HTML & CSS — August 2010 role="contentinfo"

  34. Progressive Enhancement with ARIA? Structural Roles ThinkVitamin Presents... HTML & CSS — August 2010 Document Structure article columnheader definition directory document group heading img list listitem math note presentation region row rowheader separator Landmarks application banner complementary contentinfo form main navigation search

  35. Explain what something is & how it works photo by DavePress

  36. Progressive Enhancement with ARIA? Widget Roles ThinkVitamin Presents... HTML & CSS — August 2010 <span role="button">OK</span> (of course <button>OK</button> would be better) <div role="alert"> <p>Something went wrong.</p> </div> <div role="alertdialog"> <p>Something went wrong.</p> <img src="x.png" alt="dismiss" role="button" /> </div>

  37. Progressive Enhancement with ARIA? Widget Roles ThinkVitamin Presents... HTML & CSS — August 2010 alert alertdialog button checkbox combobox dialog gridcell link log marquee menuitem menuitemcheckbox menuitemradio option progressbar radio radiogroup scrollbar slider spinbutton status tab tabpanel textbox timer tooltip treeitem Widget Container Roles grid listbox menu menubar tablist toolbar tree treegrid

  38. Progressive Enhancement with ARIA? Widget Properties ThinkVitamin Presents... HTML & CSS — August 2010 aria-activedescendant aria-atomic aria-autocomplete aria-controls aria-describedby aria-dropeffect aria-flowto aria-haspopup aria-label aria-labelledby aria-level aria-live aria-multiline aria-multiselectable aria-orientation aria-owns aria-posinset aria-readonly aria-relevant aria-required aria-setsize aria-sort aria-valuemax aria-valuemin

  39. Indicate what’s going on photo by exfordy

  40. Progressive Enhancement with ARIA? Widget States ThinkVitamin Presents... HTML & CSS — August 2010 B B (on) (off) <button> <img src="bold-off.png" alt="bold" /> </button> <button> <img src="bold-on.png" alt="bold" /> </button>

  41. Progressive Enhancement with ARIA? Widget States ThinkVitamin Presents... HTML & CSS — August 2010 B B (on) (off) <button> <img src="bold-off.png" alt="not bold" /> </button> <button> <img src="bold-on.png" alt="bold" /> </button>

  42. Progressive Enhancement with ARIA? Widget States ThinkVitamin Presents... HTML & CSS — August 2010 B B (on) (off) <button role="button" aria-pressed="false"> <img src="bold-off.png" alt="not bold" /> </button> <button role="button" aria-pressed="true"> <img src="bold-on.png" alt="bold" /> </button>

  43. Progressive Enhancement with ARIA? Complex Widgets ThinkVitamin Presents... HTML & CSS — August 2010

  44. Progressive Enhancement with ARIA? Complex Widgets ThinkVitamin Presents... HTML & CSS — August 2010 role="application"

  45. Progressive Enhancement with ARIA? Complex Widgets ThinkVitamin Presents... HTML & CSS — August 2010 role="slider" aria-labelledby="label_handle_valueA" aria-valuemin="0" aria-valuemax="71" aria-valuenow="22" aria-valuetext="Apr 04"

  46. Progressive Enhancement with ARIA? Complex Widgets ThinkVitamin Presents... HTML & CSS — August 2010 role="presentation"

  47. Progressive Enhancement with ARIA? Widget States ThinkVitamin Presents... HTML & CSS — August 2010 aria-busy aria-checked aria-disabled aria-expanded aria-grabbed aria-hidden aria-invalid aria-pressed aria-selected aria-valuenow (the W3C defines this as a “property”) aria-valuetext (ditto)

  48. Highlight “living” content photo by kevin1024

  49. Progressive Enhancement with ARIA? Live Regions ThinkVitamin Presents... HTML & CSS — August 2010

More Related