1 / 94

Progressive Enhancement with ARIA [Accessibility Summit 2010]

If you've been paying attention for the last few years, you're likely well-versed in progressive enhancement and it's content-out approach to web design, but you may be less familiar with the Accessible Rich Internet Applications spec and how you can leverage its enhanced semantics to provide a truly accessible experience.<br><br>In this session, we'll cover the following:<br><br>* Discuss progressive enhancement and where ARIA fits into the mix<br>* Examine how ARIA's landmark roles can provide additional clues as to document structure<br>* Look at the various roles and states ARIA defines for building accessible widgets<br>* Cover how to leverage tabindex in an effort to create a better overall experience when using the keyboard<br>* Walk through the construction of an ARIA-enabled widget, from markup to scripting, following the progressive enhancement process

AaronGustafson
Download Presentation

Progressive Enhancement with ARIA [Accessibility Summit 2010]

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 2

  3. 3

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

  5. Accessibility is crucial 5 photo by TimothyJ

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

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

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

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

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

  11. Progressive Enhancement with ARIA? Building better Accessibility Summit — 30 September 2010 Every great experience on the web begins with two key things: clear, well-written prose and the HTTP protocol. Text & HTTP 11

  12. Progressive Enhancement with ARIA? Building better Accessibility Summit — 30 September 2010 Semantics (markup) convey the underlying meaning of the content... (x)HTML Text & HTTP 12

  13. Progressive Enhancement with ARIA? Building better Accessibility Summit — 30 September 2010 Semantics (markup) convey the underlying meaning of the content... but if poorly applied, meaning can be obscured. (x)HTML Text & HTTP 12

  14. Progressive Enhancement with ARIA? Building better Accessibility Summit — 30 September 2010 CSS can enhance usability through visual clues... CSS (x)HTML Text & HTTP 13

  15. Progressive Enhancement with ARIA? Building better Accessibility Summit — 30 September 2010 CSS can enhance usability through visual clues... but it can also reduce accessibility if misused. CSS (x)HTML Text & HTTP 13

  16. Progressive Enhancement with ARIA? Building better Accessibility Summit — 30 September 2010 JavaScript can be used to build more intuitive interfaces... JavaScript CSS (x)HTML Text & HTTP 14

  17. Progressive Enhancement with ARIA? Building better Accessibility Summit — 30 September 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

  18. Progressive Enhancement with ARIA? Building better Accessibility Summit — 30 September 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

  19. Progressive Enhancement with ARIA? Progressive Enhancement Accessibility Summit — 30 September 2010 ARIA User Experience JavaScript CSS BASIC ADVANCED Browser Capabilities (x)HTML Text & HTTP 16

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

  21. Semantics+ 18

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

  23. Progressive Enhancement with ARIA? Accessibility Summit — 30 September 2010 HTML 20

  24. Progressive Enhancement with ARIA? Accessibility Summit — 30 September 2010 http://tinyurl.com/cwyvny http://habilis.net/validator-sac/ 20

  25. Call attention to important pieces 21 photo by Verity Cridland

  26. Progressive Enhancement with ARIA? Structural Roles Accessibility Summit — 30 September 2010 22

  27. Progressive Enhancement with ARIA? Structural Roles Accessibility Summit — 30 September 2010 role="banner" 23

  28. Progressive Enhancement with ARIA? Structural Roles Accessibility Summit — 30 September 2010 role="main" 24

  29. Progressive Enhancement with ARIA? Structural Roles Accessibility Summit — 30 September 2010 role="article" 25

  30. Progressive Enhancement with ARIA? Structural Roles Accessibility Summit — 30 September 2010 role="complementary" 26

  31. Progressive Enhancement with ARIA? Structural Roles Accessibility Summit — 30 September 2010 role="list" 27

  32. Progressive Enhancement with ARIA? Structural Roles Accessibility Summit — 30 September 2010 role="list" 28

  33. Progressive Enhancement with ARIA? Structural Roles Accessibility Summit — 30 September 2010 role="list" 29

  34. Progressive Enhancement with ARIA? Structural Roles Accessibility Summit — 30 September 2010 role="list" 30

  35. Progressive Enhancement with ARIA? Structural Roles Accessibility Summit — 30 September 2010 role="listitem" 31

  36. Progressive Enhancement with ARIA? Structural Roles Accessibility Summit — 30 September 2010 role="form" 32

  37. Progressive Enhancement with ARIA? Structural Roles Accessibility Summit — 30 September 2010 role="article" 33

  38. Progressive Enhancement with ARIA? Structural Roles Accessibility Summit — 30 September 2010 role="contentinfo" 34

  39. Progressive Enhancement with ARIA? Structural Roles Accessibility Summit — 30 September 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

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

  41. Progressive Enhancement with ARIA? Widget Roles Accessibility Summit — 30 September 2010 <span role="button">OK</span> (of course <button>OK</button> would be better) 37

  42. Progressive Enhancement with ARIA? Widget Roles Accessibility Summit — 30 September 2010 <span role="button">OK</span> (of course <button>OK</button> would be better) <div role="alert"> <p>Something went wrong.</p> </div> 37

  43. Progressive Enhancement with ARIA? Widget Roles Accessibility Summit — 30 September 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

  44. Progressive Enhancement with ARIA? Widget Roles Accessibility Summit — 30 September 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

  45. Progressive Enhancement with ARIA? Widget Properties Accessibility Summit — 30 September 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

  46. Indicate what’s going on 40 photo by exfordy

  47. Progressive Enhancement with ARIA? Widget States Accessibility Summit — 30 September 2010 B B (on) (off) 41

  48. Progressive Enhancement with ARIA? Widget States Accessibility Summit — 30 September 2010 B B (on) (off) <button> <img src="bold-off.png" alt="bold" /> </button> <button> <img src="bold-on.png" alt="bold" /> </button> 41

  49. Progressive Enhancement with ARIA? Widget States Accessibility Summit — 30 September 2010 B B (on) (off) <button> <img src="bold-off.png" alt="not bold" /> </button> <button> <img src="bold-on.png" alt="bold" /> </button> 41

  50. Progressive Enhancement with ARIA? Widget States Accessibility Summit — 30 September 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> 41

More Related