1 / 80

Why ARIA? [DevChatt 2010]

This session covers why you should pay attention to the accessibility of your web site or application and then walks you through how to do it using WAI-ARIA and JavaScript.

AaronGustafson
Download Presentation

Why ARIA? [DevChatt 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. Why ARIA? or Why should I bother to make my website accessible? 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. Why ARIA?? DevChatt - March 2010 Building better Semantics (markup) convey the underlying meaning of the content... but if poorly applied, meaning can be obscured. (x)HTML

  11. Why ARIA?? DevChatt - March 2010 Building better CSS can enhance usability through visual clues... but it can also reduce accessibility if misused. CSS (x)HTML

  12. Why ARIA?? DevChatt - March 2010 Building better JavaScript can be used to build more intuitive interfaces... but it cannot be relied on 100% of the time. JS CSS (x)HTML

  13. Why ARIA?? DevChatt - March 2010 Building better 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 JS CSS (x)HTML

  14. Why ARIA?? DevChatt - March 2010 Progressive Enhancement User Experience ARIA JS BASIC ADVANCED CSS Browser Capabilities (x)HTML

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

  16. Semantics+

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

  18. Why ARIA?? DevChatt - March 2010 HTML

  19. Why ARIA?? DevChatt - March 2010 http://tinyurl.com/cwyvny http://habilis.net/validator-sac/

  20. Call attention to important pieces photo by Verity Cridland

  21. Why ARIA?? DevChatt - March 2010 Structural Roles role="banner"

  22. Why ARIA?? DevChatt - March 2010 Structural Roles role="main"

  23. Why ARIA?? DevChatt - March 2010 Structural Roles role="navigation"

  24. Why ARIA?? DevChatt - March 2010 Structural Roles role="article"

  25. Why ARIA?? DevChatt - March 2010 Structural Roles role="list" (but hopefully you used a ul or ol)

  26. Why ARIA?? DevChatt - March 2010 Structural Roles role="form"

  27. Why ARIA?? DevChatt - March 2010 Structural Roles role="complementary"

  28. Why ARIA?? DevChatt - March 2010 Structural Roles role="contentinfo"

  29. Why ARIA?? DevChatt - March 2010 Structural Roles role="list"

  30. Why ARIA?? DevChatt - March 2010 Structural Roles role="listitem"

  31. Why ARIA?? DevChatt - March 2010 Structural Roles 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

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

  33. Why ARIA?? DevChatt - March 2010 Widget Roles <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>

  34. Why ARIA?? DevChatt - March 2010 Widget Roles 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

  35. Why ARIA?? DevChatt - March 2010 Widget Properties 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

  36. Indicate what’s going on photo by exfordy

  37. Why ARIA?? DevChatt - March 2010 Widget States B B (on) (off) <button> <img src="bold-off.png" alt="bold" /> </button> <button> <img src="bold-on.png" alt="bold" /> </button>

  38. Why ARIA?? DevChatt - March 2010 Widget States B B (on) (off) <button> <img src="bold-off.png" alt="not bold" /> </button> <button> <img src="bold-on.png" alt="bold" /> </button>

  39. Why ARIA?? DevChatt - March 2010 Widget States 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>

  40. Why ARIA?? DevChatt - March 2010 Complex Widgets role="application"

  41. Why ARIA?? DevChatt - March 2010 Complex Widgets role="slider" aria-labelledby="label_handle_valueA" aria-valuemin="0" aria-valuemax="71" aria-valuenow="22" aria-valuetext="Apr 04"

  42. Why ARIA?? DevChatt - March 2010 Complex Widgets role="presentation"

  43. Why ARIA?? DevChatt - March 2010 Widget States 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)

  44. Highlight “living” content photo by kevin1024

  45. Why ARIA?? DevChatt - March 2010 Live Regions <span id="chars_left_notice" class="numeric"> <strong id="status-field-char-counter" class="char-counter">140</strong> </span>

  46. Why ARIA?? DevChatt - March 2010 Live Regions <span id="chars_left_notice" class="numeric" aria-live="polite"> <strong id="status-field-char-counter" class="char-counter">140</strong> </span>

  47. Why ARIA?? DevChatt - March 2010 Live Regions <span id="chars_left_notice" class="numeric" aria-live="polite"> <strong id="status-field-char-counter" class="char-counter">140</strong> characters left </span>

  48. Why ARIA?? DevChatt - March 2010 Notification Options off change not announced polite change announced after user completes her current activity assertive user agent should interrupt the user’s activity, but not immediately rude user agent should interrupt the user’s activity immediately

  49. Manage focus with slight-of-hand photo by cfpg

More Related