Your SlideShare is downloading. ×
Why ARIA?
              or
Why should I bother to make my
     website accessible?


          Aaron Gustafson
We are creating
 richer online
 experiences
...and the barriers
which prohibit them.
                       photo by drcorneilus
Accessibility is crucial




       Aaron Gustafson




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




                             photo by Ed Yourdon
But accessibility
isn’t only about
   supporting
 screen readers.
What if you can’t use a mouse?




                             photo by lastquest
What if you don’t see a change?
                             photo by placenamehere
We can and must build better.




                                photo by Guillermo
Why ARIA?!                                         DevChatt - March 2010




Building better
                        Seman...
Why ARIA?!                                          DevChatt - March 2010




Building better
                        CSS ...
Why ARIA?!                                         DevChatt - March 2010




Building better
                        JavaS...
Why ARIA?!                                           DevChatt - March 2010




Building better
                        WAI...
Why ARIA?!                                                        DevChatt - March 2010




Progressive Enhancement




  ...
WAI-ARIA is a new(ish) tool




                              photo by Saffanna
Semantics+
Map OS concepts to the web

                             photo by steve-uk
Why ARIA?!          DevChatt - March 2010




             HTML
Why ARIA?!                                   DevChatt - March 2010




               http://tinyurl.com/cwyvny
          ...
Call attention to important pieces
                               photo by Verity Cridland
Why ARIA?!                        DevChatt - March 2010




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




Structural Roles




                   role="main"
Why ARIA?!                      DevChatt - March 2010




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




Structural Roles



                   role="article"
Why ARIA?!                                DevChatt - March 2010




Structural Roles




                   role="list"
  ...
Why ARIA?!                      DevChatt - March 2010




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




Structural Roles




                   role="complementary"
Why ARIA?!                      DevChatt - March 2010




Structural Roles




                   role="contentinfo"
Why ARIA?!                      DevChatt - March 2010




Structural Roles




                   role="list"
Why ARIA?!                      DevChatt - March 2010




Structural Roles




                   role="listitem"
Why ARIA?!                                    DevChatt - March 2010




Structural Roles
Document Structure
article       ...
Explain what something is
     & how it works




                            photo by DavePress
Why ARIA?!                                      DevChatt - March 2010




Widget Roles
<span role="button">OK</span>
(of c...
Why ARIA?!                                         DevChatt - March 2010




Widget Roles
alert                marquee    ...
Why ARIA?!                                   DevChatt - March 2010




Widget Properties
aria-activedescendant   aria-mult...
Indicate what’s going on




                           photo by exfordy
Why ARIA?!                               DevChatt - March 2010




Widget States

                   B       B
           ...
Why ARIA?!                               DevChatt - March 2010




Widget States

                   B       B
           ...
Why ARIA?!                                  DevChatt - March 2010




Widget States

                   B       B
        ...
Why ARIA?!                        DevChatt - March 2010




Complex Widgets

              role="application"
Why ARIA?!                                    DevChatt - March 2010




Complex Widgets




              role="slider"
  ...
Why ARIA?!                         DevChatt - March 2010




Complex Widgets




              role="presentation"
Why ARIA?!                                         DevChatt - March 2010




Widget States
aria-busy
aria-checked
aria-dis...
Highlight “living” content
                             photo by kevin1024
Why ARIA?!                               DevChatt - March 2010




Live Regions



<span id="chars_left_notice" class="num...
Why ARIA?!                               DevChatt - March 2010




Live Regions



<span id="chars_left_notice" class="num...
Why ARIA?!                               DevChatt - March 2010




Live Regions



<span id="chars_left_notice" class="num...
Why ARIA?!                                                  DevChatt - March 2010




Notification Options
off
change not a...
Manage focus with slight-of-hand




                              photo by cfpg
Why ARIA?!                               DevChatt - March 2010




tabindex helps manage focus
<div tabindex="0">
  <p>Thi...
Piecing it all together
                          photo by Richard Jones
Why ARIA?!                DevChatt - March 2010




Let’s Build a Tabbed Interface
Why ARIA?!                                         DevChatt - March 2010




Traditional approach
<h1>Pumpkin Pie</h1>
<di...
Why ARIA?!                 DevChatt - March 2010




Static HTML with no style
Why ARIA?!           DevChatt - March 2010




A little typography
Why ARIA?!            DevChatt - March 2010




Typography and color
Why ARIA?!           DevChatt - March 2010




Taking another look
Why ARIA?!             DevChatt - March 2010




Taking another look




              .tabbed
Why ARIA?!                                         DevChatt - March 2010




Required source
<h1>Pumpkin Pie</h1>
<div cla...
Why ARIA?!                                      DevChatt - March 2010




Understanding the flow



                 Split ...
Why ARIA?!               DevChatt - March 2010




Mouse-based interaction
Why ARIA?!                                      DevChatt - March 2010




Assigning ARIA Roles




              role="app...
Why ARIA?!                    DevChatt - March 2010




Assigning ARIA Roles
              role="tablist"
Why ARIA?!                                 DevChatt - March 2010




Assigning ARIA Roles
              role="tab"
       ...
Why ARIA?!                        DevChatt - March 2010




Assigning ARIA Roles
     role="tab"
     aria-selected="true"...
Why ARIA?!                                         DevChatt - March 2010




Updating states and properties
tab.onclick   ...
Why ARIA?!                 DevChatt - March 2010




Enabling the keyboard
tab.onclick   = swap;
tab.onkeydown = moveFocus...
Why ARIA?!                  DevChatt - March 2010




Enabling the keyboard
              tabindex="0"
Why ARIA?!                   DevChatt - March 2010




Enabling the keyboard
              tabindex="-1"
Why ARIA?!                          DevChatt - March 2010




Enabling the keyboard
function moveFocus( e ) {
  e = ( e ) ...
Why ARIA?!                                     DevChatt - March 2010




Enabling the keyboard
function getTab( tab )
{
  ...
Why ARIA?!                                        DevChatt - March 2010




Enabling the keyboard
function moveFocus( e ) ...
Why ARIA?!                                         DevChatt - March 2010




Enabling the keyboard
function move( tab, dir...
Why ARIA?!                                           DevChatt - March 2010




Enabling the keyboard
function swap( e ){
 ...
Why ARIA?!                    DevChatt - March 2010




The Fruit (Pie) of Our Labor
Why ARIA?!            DevChatt - March 2010




Who is Supporting WAI-ARIA?
Why ARIA?!                                                  DevChatt - March 2010




For More
WAI-ARIA Spec
w3.org/TR/wai...
Why ARIA? [DevChatt 2010]
Why ARIA? [DevChatt 2010]
Why ARIA? [DevChatt 2010]
Upcoming SlideShare
Loading in...5
×

Why ARIA? [DevChatt 2010]

3,599

Published on

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.

Published in: Technology
0 Comments
17 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,599
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
55
Comments
0
Likes
17
Embeds 0
No embeds

No notes for slide

Transcript of "Why ARIA? [DevChatt 2010]"

  1. 1. Why ARIA? or Why should I bother to make my website accessible? Aaron Gustafson
  2. 2. We are creating richer online experiences
  3. 3. ...and the barriers which prohibit them. photo by drcorneilus
  4. 4. Accessibility is crucial Aaron Gustafson photo by TimothyJ
  5. 5. Google is a voracious consumer of the web. And it’s blind. photo by Ed Yourdon
  6. 6. But accessibility isn’t only about supporting screen readers.
  7. 7. What if you can’t use a mouse? photo by lastquest
  8. 8. What if you don’t see a change? photo by placenamehere
  9. 9. We can and must build better. photo by Guillermo
  10. 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. 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. 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. 13. Why ARIA?! DevChatt - March 2010 Building better WAI-ARIA extends the semantics of the document to provide additional insight into the state of ARIA the interface and how to interact with it. JS CSS (x)HTML
  14. 14. Why ARIA?! DevChatt - March 2010 Progressive Enhancement User Experience ARIA JS BASIC ADVANCED CSS Browser Capabilities (x)HTML
  15. 15. WAI-ARIA is a new(ish) tool photo by Saffanna
  16. 16. Semantics+
  17. 17. Map OS concepts to the web photo by steve-uk
  18. 18. Why ARIA?! DevChatt - March 2010 HTML
  19. 19. Why ARIA?! DevChatt - March 2010 http://tinyurl.com/cwyvny http://habilis.net/validator-sac/
  20. 20. Call attention to important pieces photo by Verity Cridland
  21. 21. Why ARIA?! DevChatt - March 2010 Structural Roles role="banner"
  22. 22. Why ARIA?! DevChatt - March 2010 Structural Roles role="main"
  23. 23. Why ARIA?! DevChatt - March 2010 Structural Roles role="navigation"
  24. 24. Why ARIA?! DevChatt - March 2010 Structural Roles role="article"
  25. 25. Why ARIA?! DevChatt - March 2010 Structural Roles role="list" (but hopefully you used a ul or ol)
  26. 26. Why ARIA?! DevChatt - March 2010 Structural Roles role="form"
  27. 27. Why ARIA?! DevChatt - March 2010 Structural Roles role="complementary"
  28. 28. Why ARIA?! DevChatt - March 2010 Structural Roles role="contentinfo"
  29. 29. Why ARIA?! DevChatt - March 2010 Structural Roles role="list"
  30. 30. Why ARIA?! DevChatt - March 2010 Structural Roles role="listitem"
  31. 31. Why ARIA?! DevChatt - March 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
  32. 32. Explain what something is & how it works photo by DavePress
  33. 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. 34. Why ARIA?! DevChatt - March 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
  35. 35. Why ARIA?! DevChatt - March 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
  36. 36. Indicate what’s going on photo by exfordy
  37. 37. Why ARIA?! DevChatt - March 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>
  38. 38. Why ARIA?! DevChatt - March 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>
  39. 39. Why ARIA?! DevChatt - March 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>
  40. 40. Why ARIA?! DevChatt - March 2010 Complex Widgets role="application"
  41. 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. 42. Why ARIA?! DevChatt - March 2010 Complex Widgets role="presentation"
  43. 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. 44. Highlight “living” content photo by kevin1024
  45. 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. 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. 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. 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. 49. Manage focus with slight-of-hand photo by cfpg
  50. 50. Why ARIA?! DevChatt - March 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>
  51. 51. Piecing it all together photo by Richard Jones
  52. 52. Why ARIA?! DevChatt - March 2010 Let’s Build a Tabbed Interface
  53. 53. Why ARIA?! DevChatt - March 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>
  54. 54. Why ARIA?! DevChatt - March 2010 Static HTML with no style
  55. 55. Why ARIA?! DevChatt - March 2010 A little typography
  56. 56. Why ARIA?! DevChatt - March 2010 Typography and color
  57. 57. Why ARIA?! DevChatt - March 2010 Taking another look
  58. 58. Why ARIA?! DevChatt - March 2010 Taking another look .tabbed
  59. 59. Why ARIA?! DevChatt - March 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>
  60. 60. Why ARIA?! DevChatt - March 2010 Understanding the flow Split the content & make Page some tabs JS? Yes No
  61. 61. Why ARIA?! DevChatt - March 2010 Mouse-based interaction
  62. 62. Why ARIA?! DevChatt - March 2010 Assigning ARIA Roles role="application" aria-activedescendant="folder-1"
  63. 63. Why ARIA?! DevChatt - March 2010 Assigning ARIA Roles role="tabpanel" aria-hidden="false" aria-labelledby="folder-1-tab"
  64. 64. Why ARIA?! DevChatt - March 2010 Assigning ARIA Roles role="tablist"
  65. 65. Why ARIA?! DevChatt - March 2010 Assigning ARIA Roles role="tab" aria-selected="false" aria-describedby="folder-4"
  66. 66. Why ARIA?! DevChatt - March 2010 Assigning ARIA Roles role="tab" aria-selected="true" aria-describedby="folder-1"
  67. 67. Why ARIA?! DevChatt - March 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 ); }
  68. 68. Why ARIA?! DevChatt - March 2010 Enabling the keyboard tab.onclick = swap; tab.onkeydown = moveFocus; tab.onfocus = swap;
  69. 69. Why ARIA?! DevChatt - March 2010 Enabling the keyboard tabindex="0"
  70. 70. Why ARIA?! DevChatt - March 2010 Enabling the keyboard tabindex="-1"
  71. 71. Why ARIA?! DevChatt - March 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 ); } }
  72. 72. Why ARIA?! DevChatt - March 2010 Enabling the keyboard function getTab( tab ) { while ( tab.nodeName.toLowerCase() != 'li' ) { tab = tab.parentNode; } return tab; }
  73. 73. Why ARIA?! DevChatt - March 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; } // ... }
  74. 74. Why ARIA?! DevChatt - March 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(); } } }
  75. 75. Why ARIA?! DevChatt - March 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' ); // ... }
  76. 76. Why ARIA?! DevChatt - March 2010 The Fruit (Pie) of Our Labor
  77. 77. Why ARIA?! DevChatt - March 2010 Who is Supporting WAI-ARIA?
  78. 78. Why ARIA?! DevChatt - March 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/
  79. 79. Why ARIA?! DevChatt - March 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

×