Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Progressive
Enhancement
 with ARIA
   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
Progressive Enhancement with ARIA!                     ThinkVitamin Presents... HTML & CSS — August 2010




Building bett...
Progressive Enhancement with ARIA!                     ThinkVitamin Presents... HTML & CSS — August 2010




Building bett...
Progressive Enhancement with ARIA!                     ThinkVitamin Presents... HTML & CSS — August 2010




Building bett...
Progressive Enhancement with ARIA!                     ThinkVitamin Presents... HTML & CSS — August 2010




Building bett...
Progressive Enhancement with ARIA!                      ThinkVitamin Presents... HTML & CSS — August 2010




Building bet...
Progressive Enhancement with ARIA!                                ThinkVitamin Presents... HTML & CSS — August 2010




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




                              photo by Saffanna
Semantics+
Map OS concepts to the web

                             photo by steve-uk
Progressive Enhancement with ARIA!          ThinkVitamin Presents... HTML & CSS — August 2010




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




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




                http://tinyurl...
Call attention to important pieces
                               photo by Verity Cridland
Progressive Enhancement with ARIA!   ThinkVitamin Presents... HTML & CSS — August 2010




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




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




Structural Roles




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




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




Structural Roles




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




Structural Roles




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




Structural Roles




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




Structural Roles




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




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




Structural Roles




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




Structural Roles




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




Structural Roles
...
Explain what something is
     & how it works




                            photo by DavePress
Progressive Enhancement with ARIA!              ThinkVitamin Presents... HTML & CSS — August 2010




Widget Roles
<span r...
Progressive Enhancement with ARIA!                      ThinkVitamin Presents... HTML & CSS — August 2010




Widget Roles...
Progressive Enhancement with ARIA!            ThinkVitamin Presents... HTML & CSS — August 2010




Widget Properties
aria...
Indicate what’s going on




                           photo by exfordy
Progressive Enhancement with ARIA!                  ThinkVitamin Presents... HTML & CSS — August 2010




Widget States

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




Widget States

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




Widget States

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




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




Complex Wi...
Progressive Enhancement with ARIA!                         ThinkVitamin Presents... HTML & CSS — August 2010




Complex W...
Progressive Enhancement with ARIA!                         ThinkVitamin Presents... HTML & CSS — August 2010




Complex W...
Progressive Enhancement with ARIA!                 ThinkVitamin Presents... HTML & CSS — August 2010




Widget States
ari...
Highlight “living” content
                             photo by kevin1024
Progressive Enhancement with ARIA!   ThinkVitamin Presents... HTML & CSS — August 2010




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




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




Live Regions



<span id="chars...
Progressive Enhancement with ARIA!   ThinkVitamin Presents... HTML & CSS — August 2010




Live Regions



<span id="chars...
Progressive Enhancement with ARIA!   ThinkVitamin Presents... HTML & CSS — August 2010




Live Regions



<span id="chars...
Progressive Enhancement with ARIA!            ThinkVitamin Presents... HTML & CSS — August 2010




Notification Options
of...
Manage focus with slight-of-hand




                              photo by cfpg
Progressive Enhancement with ARIA!   ThinkVitamin Presents... HTML & CSS — August 2010




tabindex helps manage focus
<di...
Piecing it all together
                          photo by Richard Jones
Progressive Enhancement with ARIA!   ThinkVitamin Presents... HTML & CSS — August 2010




Let’s Build a Tabbed Interface
Progressive Enhancement with ARIA!      ThinkVitamin Presents... HTML & CSS — August 2010




Traditional approach
<h1>Pum...
Progressive Enhancement with ARIA!   ThinkVitamin Presents... HTML & CSS — August 2010




Static HTML with no style
Progressive Enhancement with ARIA!   ThinkVitamin Presents... HTML & CSS — August 2010




A little typography
Progressive Enhancement with ARIA!   ThinkVitamin Presents... HTML & CSS — August 2010




Typography and color
Progressive Enhancement with ARIA!   ThinkVitamin Presents... HTML & CSS — August 2010




Taking another look
Progressive Enhancement with ARIA!             ThinkVitamin Presents... HTML & CSS — August 2010




Taking another look

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




Required source
<h1>Pumpkin ...
Progressive Enhancement with ARIA!                     ThinkVitamin Presents... HTML & CSS — August 2010




Understanding...
Progressive Enhancement with ARIA!   ThinkVitamin Presents... HTML & CSS — August 2010




Mouse-based interaction
Progressive Enhancement with ARIA!   ThinkVitamin Presents... HTML & CSS — August 2010




Assigning ARIA Roles
Progressive Enhancement with ARIA!                       ThinkVitamin Presents... HTML & CSS — August 2010




Assigning A...
Progressive Enhancement with ARIA!                        ThinkVitamin Presents... HTML & CSS — August 2010




Assigning ...
Progressive Enhancement with ARIA!                    ThinkVitamin Presents... HTML & CSS — August 2010




Assigning ARIA...
Progressive Enhancement with ARIA!                     ThinkVitamin Presents... HTML & CSS — August 2010




Assigning ARI...
Progressive Enhancement with ARIA!   ThinkVitamin Presents... HTML & CSS — August 2010




Assigning ARIA Roles
      role...
Progressive Enhancement with ARIA!      ThinkVitamin Presents... HTML & CSS — August 2010




Updating states and properti...
Progressive Enhancement with ARIA!   ThinkVitamin Presents... HTML & CSS — August 2010




Enabling the keyboard
tab.oncli...
Progressive Enhancement with ARIA!   ThinkVitamin Presents... HTML & CSS — August 2010




Enabling the keyboard
Progressive Enhancement with ARIA!               ThinkVitamin Presents... HTML & CSS — August 2010




Enabling the keyboa...
Progressive Enhancement with ARIA!   ThinkVitamin Presents... HTML & CSS — August 2010




Enabling the keyboard
         ...
Progressive Enhancement with ARIA!   ThinkVitamin Presents... HTML & CSS — August 2010




Enabling the keyboard
function ...
Progressive Enhancement with ARIA!      ThinkVitamin Presents... HTML & CSS — August 2010




Enabling the keyboard
functi...
Progressive Enhancement with ARIA!      ThinkVitamin Presents... HTML & CSS — August 2010




Enabling the keyboard
functi...
Progressive Enhancement with ARIA!      ThinkVitamin Presents... HTML & CSS — August 2010




Enabling the keyboard
functi...
Progressive Enhancement with ARIA!      ThinkVitamin Presents... HTML & CSS — August 2010




Enabling the keyboard
functi...
Progressive Enhancement with ARIA!   ThinkVitamin Presents... HTML & CSS — August 2010




The Fruit (Pie) of Our Labor
Progressive Enhancement with ARIA!   ThinkVitamin Presents... HTML & CSS — August 2010




Who is Supporting WAI-ARIA?
Progressive Enhancement with ARIA!                  ThinkVitamin Presents... HTML & CSS — August 2010




For More
WAI-ARI...
Progressive
Enhancement
 with ARIA
   Aaron Gustafson
Progressive Enhancement with ARIA!                                              ThinkVitamin Presents... HTML & CSS — Augu...
Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]
Upcoming SlideShare
Loading in …5
×

of

Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 1 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 2 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 3 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 4 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 5 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 6 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 7 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 8 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 9 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 10 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 11 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 12 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 13 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 14 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 15 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 16 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 17 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 18 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 19 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 20 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 21 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 22 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 23 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 24 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 25 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 26 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 27 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 28 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 29 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 30 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 31 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 32 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 33 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 34 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 35 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 36 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 37 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 38 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 39 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 40 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 41 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 42 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 43 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 44 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 45 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 46 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 47 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 48 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 49 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 50 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 51 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 52 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 53 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 54 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 55 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 56 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 57 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 58 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 59 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 60 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 61 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 62 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 63 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 64 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 65 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 66 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 67 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 68 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 69 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 70 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 71 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 72 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 73 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 74 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 75 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 76 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 77 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 78 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 79 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 80 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 81 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 82 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 83 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 84 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 85 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 86 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 87 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 88 Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] Slide 89
Upcoming SlideShare
Winnetka il appliance repair
Next
Download to read offline and view in fullscreen.

29 Likes

Share

Download to read offline

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

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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

  1. 1. Progressive Enhancement with ARIA 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. 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. 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. 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. 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. 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. 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. 16. WAI-ARIA is a new(ish) tool photo by Saffanna
  17. 17. Semantics+
  18. 18. Map OS concepts to the web photo by steve-uk
  19. 19. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 HTML
  20. 20. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 HTML
  21. 21. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 http://tinyurl.com/cwyvny http://habilis.net/validator-sac/
  22. 22. Call attention to important pieces photo by Verity Cridland
  23. 23. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Structural Roles
  24. 24. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Structural Roles role="banner"
  25. 25. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Structural Roles role="main"
  26. 26. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Structural Roles role="navigation"
  27. 27. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Structural Roles role="article"
  28. 28. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Structural Roles role="complementary"
  29. 29. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Structural Roles role="list"
  30. 30. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Structural Roles role="listitem"
  31. 31. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Structural Roles
  32. 32. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Structural Roles role="form"
  33. 33. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Structural Roles role="contentinfo"
  34. 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. 35. Explain what something is & how it works photo by DavePress
  36. 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. 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. 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. 39. Indicate what’s going on photo by exfordy
  40. 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. 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. 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. 43. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Complex Widgets
  44. 44. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Complex Widgets role="application"
  45. 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. 46. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Complex Widgets role="presentation"
  47. 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. 48. Highlight “living” content photo by kevin1024
  49. 49. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Live Regions
  50. 50. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Live Regions
  51. 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. 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. 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. 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. 55. Manage focus with slight-of-hand photo by cfpg
  56. 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. 57. Piecing it all together photo by Richard Jones
  58. 58. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Let’s Build a Tabbed Interface
  59. 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. 60. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Static HTML with no style
  61. 61. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 A little typography
  62. 62. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Typography and color
  63. 63. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Taking another look
  64. 64. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Taking another look .tabbed
  65. 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. 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. 67. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Mouse-based interaction
  68. 68. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Assigning ARIA Roles
  69. 69. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Assigning ARIA Roles role="application" aria-activedescendant="folder-1"
  70. 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. 71. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Assigning ARIA Roles role="tablist"
  72. 72. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Assigning ARIA Roles role="tab" aria-selected="false" aria-describedby="folder-4"
  73. 73. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Assigning ARIA Roles role="tab" aria-selected="true" aria-describedby="folder-1"
  74. 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. 75. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Enabling the keyboard tab.onclick = swap; tab.onkeydown = moveFocus; tab.onfocus = swap;
  76. 76. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Enabling the keyboard
  77. 77. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Enabling the keyboard tabindex="-1"
  78. 78. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Enabling the keyboard tabindex="0"
  79. 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. 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. 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. 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. 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. 84. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 The Fruit (Pie) of Our Labor
  85. 85. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Who is Supporting WAI-ARIA?
  86. 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. 87. Progressive Enhancement with ARIA Aaron Gustafson
  88. 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
  • jitendra.web

    Sep. 15, 2014
  • JeffreyStark1

    May. 16, 2014
  • pablocomotion

    Jan. 20, 2013
  • kyoo119

    Jan. 15, 2013
  • boldano

    Dec. 3, 2012
  • elysa222

    Oct. 12, 2012
  • thashaa

    Sep. 25, 2012
  • garuhenr

    Sep. 3, 2012
  • diegoeis

    Sep. 3, 2012
  • PitchayaIntra

    Jul. 3, 2012
  • rameshvr1

    Feb. 29, 2012
  • MireiaRibera

    Jan. 12, 2012
  • AlyssonFranklin

    Dec. 6, 2011
  • dakachi

    Nov. 20, 2011
  • rodrigogarciarejas

    Oct. 11, 2011
  • calebtang

    Jul. 21, 2011
  • soolara

    Apr. 16, 2011
  • kaelifa

    Apr. 7, 2011
  • priscillamc

    Dec. 17, 2010
  • DonnyHammell

    Nov. 6, 2010

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.

Views

Total views

9,019

On Slideshare

0

From embeds

0

Number of embeds

1,501

Actions

Downloads

107

Shares

0

Comments

0

Likes

29

×