• Like

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

  • 5,920 views
Uploaded on

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 …

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,920
On Slideshare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
95
Comments
0
Likes
29

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. 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! ThinkVitamin Presents... HTML & CSS — August 2010 Building better 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! ThinkVitamin Presents... HTML & CSS — August 2010 Building better 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! ThinkVitamin Presents... HTML & CSS — August 2010 Building better 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! ThinkVitamin Presents... HTML & CSS — August 2010 Building better 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! ThinkVitamin Presents... HTML & CSS — August 2010 Building better WAI-ARIA extends the semantics of the document to provide ARIA additional insight into the state of the interface and how to interact JavaScript with it. CSS (x)HTML Text & HTTP
  • 15. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Progressive Enhancement 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! ThinkVitamin Presents... HTML & CSS — August 2010 Structural Roles
  • 24. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Structural Roles role="banner"
  • 25. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Structural Roles role="main"
  • 26. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Structural Roles role="navigation"
  • 27. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Structural Roles role="article"
  • 28. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Structural Roles role="complementary"
  • 29. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Structural Roles role="list"
  • 30. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Structural Roles role="listitem"
  • 31. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Structural Roles
  • 32. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Structural Roles role="form"
  • 33. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Structural Roles role="contentinfo"
  • 34. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Structural Roles Document Structure article heading presentation columnheader img region definition list row directory listitem rowheader document math separator group note Landmarks application contentinfo navigation banner form search complementary main
  • 35. Explain what something is & how it works photo by DavePress
  • 36. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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>
  • 37. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Widget Roles alert marquee slider alertdialog menuitem spinbutton button menuitemcheckbox status checkbox menuitemradio tab combobox option tabpanel dialog progressbar textbox gridcell radio timer link radiogroup tooltip log scrollbar treeitem Widget Container Roles grid menubar tree listbox tablist treegrid menu toolbar
  • 38. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Widget Properties aria-activedescendant aria-multiline aria-atomic aria-multiselectable aria-autocomplete aria-orientation aria-controls aria-owns aria-describedby aria-posinset aria-dropeffect aria-readonly aria-flowto aria-relevant aria-haspopup aria-required aria-label aria-setsize aria-labelledby aria-sort aria-level aria-valuemax aria-live aria-valuemin
  • 39. Indicate what’s going on photo by exfordy
  • 40. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Widget States B B (off) (on) <button> <img src="bold-off.png" alt="bold" /> </button> <button> <img src="bold-on.png" alt="bold" /> </button>
  • 41. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Widget States B B (off) (on) <button> <img src="bold-off.png" alt="not bold" /> </button> <button> <img src="bold-on.png" alt="bold" /> </button>
  • 42. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Widget States B B (off) (on) <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! ThinkVitamin Presents... HTML & CSS — August 2010 Complex Widgets
  • 44. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Complex Widgets role="application"
  • 45. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Complex Widgets 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! ThinkVitamin Presents... HTML & CSS — August 2010 Complex Widgets role="presentation"
  • 47. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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)
  • 48. Highlight “living” content photo by kevin1024
  • 49. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Live Regions
  • 50. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Live Regions
  • 51. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Live Regions <span id="chars_left_notice" class="numeric"> <strong id="status-field-char-counter" class="char-counter">140</strong> </span>
  • 52. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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>
  • 53. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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>
  • 54. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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
  • 55. Manage focus with slight-of-hand photo by cfpg
  • 56. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 tabindex helps manage focus <div tabindex="0"> <p>This <code>div</code> can now receive focus using a keyboard’s <kbd>tab</kbd> key. How cool is that?</p> </div> <div tabindex="-1"> <p>This <code>div</code> won’t be focused by a user via the <kbd>tab</kbd> key, but JavaScript can <code>focus()</code> it. Nifty, huh?</p> </div>
  • 57. Piecing it all together photo by Richard Jones
  • 58. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Let’s Build a Tabbed Interface
  • 59. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Traditional approach <h1>Pumpkin Pie</h1> <div class="container"> <div class="section"> <h2>Overview</h2> <img src="pie.jpg" alt=""> <p>Whether you're hosting a festive party or a casual get-together with friends, our Pumpkin Pie will make entertaining easy!</p> ... </div> ... <ul class="tabs"> <li><a href="#">Overview</a></li> <li><a href="#">Ingredients</a></li> <li><a href="#">Directions</a></li> <li><a href="#">Nutrition</a></li> </ul> </div>
  • 60. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Static HTML with no style
  • 61. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 A little typography
  • 62. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Typography and color
  • 63. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Taking another look
  • 64. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Taking another look .tabbed
  • 65. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Required source <h1>Pumpkin Pie</h1> <div class="tabbed"> <h2>Overview</h2> <img src="pie.jpg" alt="" /> <p>Whether you're hosting a festive party or a casual get-together with friends, our Pumpkin Pie will make entertaining easy!</p> ... <h2>Ingredients</h2> <ul> <li>1 (9<abbr title="inch">in</abbr>) unbaked deep dish pie crust</li> <li>½ cup white sugar</li> ... </ul> <h2>Directions</h2> ... </div>
  • 66. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Understanding the flow Split the content & make Page some tabs JS? Yes No
  • 67. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Mouse-based interaction
  • 68. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Assigning ARIA Roles
  • 69. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Assigning ARIA Roles role="application" aria-activedescendant="folder-1"
  • 70. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Assigning ARIA Roles role="tabpanel" aria-hidden="false" aria-labelledby="folder-1-tab"
  • 71. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Assigning ARIA Roles role="tablist"
  • 72. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Assigning ARIA Roles role="tab" aria-selected="false" aria-describedby="folder-4"
  • 73. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Assigning ARIA Roles role="tab" aria-selected="true" aria-describedby="folder-1"
  • 74. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Updating states and properties tab.onclick = swap; // ... function swap( e ){ // ... old_tab.setAttribute( 'aria-selected', 'false' ); // ... tab.setAttribute( 'aria-selected', 'true' ); // ... old_folder.setAttribute( 'aria-hidden', 'true' ); // ... new_folder.setAttribute( 'aria-hidden', 'false' ); // ... _cabinet.setAttribute( 'aria-activedescendant', _active ); }
  • 75. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Enabling the keyboard tab.onclick = swap; tab.onkeydown = moveFocus; tab.onfocus = swap;
  • 76. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Enabling the keyboard
  • 77. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Enabling the keyboard tabindex="-1"
  • 78. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Enabling the keyboard tabindex="0"
  • 79. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Enabling the keyboard function moveFocus( e ) { e = ( e ) ? e : event; var tab = e.target || e.srcElement, key = e.keyCode || e.charCode, pass = true; tab = getTab( tab ); // keyboard handling goes here if ( ! pass ) { return cancel( e ); } }
  • 80. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Enabling the keyboard function getTab( tab ) { while ( tab.nodeName.toLowerCase() != 'li' ) { tab = tab.parentNode; } return tab; }
  • 81. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Enabling the keyboard function moveFocus( e ) { // ... switch ( key ) { case 37: // left arrow case 38: // up arrow move( tab, 'previous', false ); pass = false; break; // down (39), right (40), home (36), end (35) // should be added here case 27: // escape tab.blur(); pass = false; break; } // ... }
  • 82. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Enabling the keyboard function move( tab, direction, complete ) { if ( complete ) { if ( direction == 'previous' ) { tab.parentNode.childNodes[0].focus(); } else { tab.parentNode .childNodes[tab.parentNode .childNodes.length-1].focus(); } } else { var target = direction == 'previous' ? tab.previousSibling : tab.nextSibling; if ( target ) { target.focus(); } } }
  • 83. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Enabling the keyboard function swap( e ){ // ... old_tab.setAttribute( 'aria-selected', 'false' ); old_tab.setAttribute( 'tabindex', '-1' ); // ... tab.setAttribute( 'aria-selected', 'true' ); tab.setAttribute( 'tabindex', '0' ); // ... old_folder.setAttribute( 'aria-hidden', 'true' ); old_folder.setAttribute( 'tabindex', '-1' ); // ... new_folder.setAttribute( 'aria-hidden', 'false' ); new_folder.setAttribute( 'tabindex', '0' ); // ... }
  • 84. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 The Fruit (Pie) of Our Labor
  • 85. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Who is Supporting WAI-ARIA?
  • 86. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 For More WAI-ARIA Spec w3.org/TR/wai-aria/ WAI-ARIA Support in Browsers paciellogroup.com/blog/aria-tests/ARIA-SafariaOperaIEFF.html TabInterface easy-designs.github.com/tabinterface.js/
  • 87. Progressive Enhancement with ARIA Aaron Gustafson
  • 88. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Slides available at http://slideshare.net/AaronGustafson This presentation is licensed under Creative Commons Attribution-Noncommercial-Share Alike 3.0 flickr Photo Credits “ferris wheel? not yet...” by drcorneilus “Hunter Museum” by TimothyJ “No, I don't need any help - I'm…” by Ed Yourdon “The almighty mouse” by lastquest “wii browser - zoomed in” by placenamehere “Legospective” by Guillermо “I love my toolbox 15 July Scavenger Hunt” by Saffanna “Dual Samsung Monitors” by steve-uk “Keystone of the Monumental Arch,…” by Verity Cridland “Lego” by DavePress “iFlickr touch screen” by exfordy “Green Plant” by kevin1024 “Cartas” by cfpg “Lego Millenium Falcon” by Richard Jones