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.

0

Share

The Great Accessibility Bake Off (Respond '17)

ABSTRACT: It’s always better to bake in accessibility from the very beginning of your project than tack it on after the fact. Making accessibility decisions up front in your web app can save your users a lot of frustration and save you a lot of development time. But how do you know what to bake in, how to mix it all together, and whether you’re doing it right?

(Originally presented at Respond '17: http://www.webdirections.org/respond/)

Related Books

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

The Great Accessibility Bake Off (Respond '17)

  1. 1. The Great Accessibility Bake Off
  2. 2. @cordeliadillon Tech Lead, Web Accessibility Design Systems at Dropbox
  3. 3. This morning, we’re talking about accessibility!
  4. 4. Making products, services, and spaces that everyone can use and enjoy in all contexts, regardless of their abilities
  5. 5. Visual
  6. 6. Visual Motor
  7. 7. Visual Motor Auditory
  8. 8. Visual Motor Auditory Cognitive
  9. 9. Creating flexible systems that consider all users’ experiences from the very start, not just via tacked-on accommodations
  10. 10. Baking accessibility in
  11. 11. Set Timer
  12. 12. Set Timer <div class=“button--primary” onClick=“setTimer()”> Set Timer </div>
  13. 13. Set Timer <div class=“button--primary” onClick=“setTimer()” tabindex=“0”> Set Timer </div>
  14. 14. Set Timer <div class=“button--primary” onClick=“setTimer()” tabindex=“0” onKeyDown=“setTimer(e)”> Set Timer </div>
  15. 15. Set Timer <div class=“button--primary” onClick=“setTimer” tabindex=“0” onKeyDown=“setTimer(e)” role=“button”> Set Timer </div>
  16. 16. Set Timer <button onClick=“setTimer()”> Set Timer </button>
  17. 17. Set Timer <button class=“button--primary” onClick=“setTimer()”> Set Timer </button>
  18. 18. Image sources: http://ind.pn/2qIL6Qp and http://bit.ly/2pCoqDD
  19. 19. Image sources: http://ind.pn/2qIL6Qp and http://bit.ly/2pCoqDD
  20. 20. Image source: https://www.yahoo.com/style/anglophiles-and-baking-enthusiasts-received-a-106546370621.html
  21. 21. Image source: http://ind.pn/2qINXsS
  22. 22. You don’t have to be an accessibility expert to make great, accessible UIs.
  23. 23. Image source: https://www.yahoo.com/style/anglophiles-and-baking-enthusiasts-received-a-106546370621.html
  24. 24. Image source: http://ind.pn/2qINXsS
  25. 25. Main Ingredients
  26. 26. You will need... ❏ Semantic HTML ❏ A dash of ARIA ❏ Alt attributes for images ❏ Names for all interactive items ❏ Sufficient text contrast ❏ Mouse-keyboard parity Web Content Accessibility Guidelines: https://www.w3.org/TR/WCAG20/
  27. 27. Semantic HTML is the core ingredient for accessible web UIs.
  28. 28. <button> <article> <input> <table> <main> <ul> <nav> <li> <a href> <h1> <h2> <section> <div> <span> <a>
  29. 29. ...but as we move from websites to web apps, sometimes we need to spice up our HTML with ARIA.
  30. 30. Accessible Rich Internet Applications
  31. 31. https://www.w3.org/TR/wai-aria-1.1/ Accessible Rich Internet Applications
  32. 32. ARIA can communicate elements’ role, state, and properties to assistive technology when semantic HTML won’t suffice.
  33. 33. ARIA can communicate elements’ role, state, and properties to assistive technology when semantic HTML won’t suffice.
  34. 34. Use alternative text to make sure images’ meaning comes through.
  35. 35. Informational: Short, descriptive alt text <img alt=“Cupcake” src=“icon-final-FINAL.png”/>
  36. 36. Informational: Short, descriptive alt text <img alt=“Cupcake with cherry on top” src=“cupcake1.png”/> <img alt=“Cupcake with sprinkles” src=“cupcake2.png”/>
  37. 37. Redundant or decorative: Empty alt text <img alt=“” src=“icon-final-final.png”/> <span class=“uppercase”>Cupcakes</span> CUPCAKES <svg aria-hidden=“true”>...</svg> <span class=“uppercase”>Cupcakes</span>
  38. 38. Use good text contrast.
  39. 39. WCAG 2.0 AA Guidelines: 4.5:1 for regular text 3:1 for large text http://leaverou.github.io/contrast-ratio/ http://wave.webaim.org
  40. 40. Good morning, Respond Conf! I’m happy to be in Melbourne. Talking with y’all about baking. What’s your favorite cake? Do you say “frosting” or “icing”? Is quiche a pastry? Do you like chocolate? Can you still see me? Shout “CUPCAKES!” if you can read this.
  41. 41. Good morning, Respond Conf! I’m happy to be in Melbourne. Talking with y’all about baking. What’s your favorite cake? Do you say “frosting” or “icing”? Is quiche a pastry? Do you like chocolate? Can you still see me? Shout “CUPCAKES!” if you can read this. 21:1 9.89:1 5.74:1 2.85:1 2.01:1 1.61:1 1.41:1 1.15:1 1.14:1
  42. 42. Judging Criteria
  43. 43. Does it look amazing? Does it taste amazing? Is it well-baked?
  44. 44. Does it look amazing? Does it taste amazing? Is it well-baked? Does it look amazing? Does it function as expected? Did you over/under-engineer it?
  45. 45. Test everything you make with... ❏ a mouse ❏ a keyboard ❏ a screen reader ❏ multiple screen readers ❏ NVDA + Firefox ❏ JAWS + IE 11 ❏ VoiceOver + Safari ❏ grayscale mode ❏ real users!
  46. 46. Signature Challenge
  47. 47. Subscribe <input type=“text”/> <input type=“email” required /> <input type=“checkbox” /> <input type=“submit” value=“Subscribe” /> 1. The fields themselves
  48. 48. Subscribe <label for=“name”>Name</label> <input id=“name” type=“text”/> <label for=“email”>Email</label> <input id=“email” type=“email” required /> <input id=“bakeoff” type=“checkbox” /> <label for=“bakeoff”>Yes, …</label> <input type=“submit” value=“Subscribe” /> 2. Associated, visible labels Name Email* Yes, I want to be a contestant on “The Great Accessibility Bake Off.”
  49. 49. Subscribe <label for=“name”>Name</label> <input placeholder=“Name” type=“text”/> <label for=“email”>Email</label> <input placeholder=“Email” type=“email” required /> <input id=“bakeoff” type=“checkbox” /> <label for=“bakeoff”>Yes, …</label> <input type=“submit” value=“Subscribe” /> No placeholders as labels Yes, I want to be a contestant on “The Great Accessibility Bake Off.” Name Email*
  50. 50. Subscribe <label for=“name”>Name</label> <input placeholder=“Name” type=“text”/> <label for=“email”>Email</label> <input placeholder=“Email” type=“email” required /> <input id=“bakeoff” type=“checkbox” /> <label for=“bakeoff”>Yes, …</label> <input type=“submit” value=“Subscribe” /> No placeholders as labels Yes, I want to be a contestant on “The Great Accessibility Bake Off.” What should I put here again? Email*
  51. 51. Subscribe <label for=“name”>Name</label> <input id=“name” type=“text”/> <label for=“email”>Email</label> <input id=“email” type=“email” required /> <input id=“bakeoff” type=“checkbox” /> <label for=“bakeoff”>Yes, …</label> <input type=“submit” value=“Subscribe” /> 2. Associated, visible labels Name Email* Yes, I want to be a contestant on “The Great Accessibility Bake Off.” What should I put here again?
  52. 52. 3. Visible focus indicators Subscribe Name Email* Yes, I want to be a contestant on “The Great Accessibility Bake Off.” What should I put here again? :focus { outline: none; } Don’t just remove default
  53. 53. 3. Visible focus indicators Subscribe Name Email* Yes, I want to be a contestant on “The Great Accessibility Bake Off.” What should I put here again? :focus { outline: none; box-shadow: 0 0 0 2px rgb(103, 78, 167); } :focus { outline: none; } Don’t just remove default Replace it with something!
  54. 54. Subscribe <label for=“name”>Name</label> <input id=“name” type=“text”/> <label for=“email”>Email</label> <input id=“email” type=“email” required aria-describedby=“email-error” /> <span class=“error” id=“email-error”> Your email… </span> <input id=“bakeoff” type=“checkbox” /> <label for=“bakeoff”>Yes, …</label> <input type=“submit” value=“Subscribe” /> 4. Associated errors Name Email* Yes, I want to be a contestant on “The Great Accessibility Bake Off.” What should I put here again? Email address must include @ sign.
  55. 55. Subscribe <label for=“name”>Name</label> <input id=“name” type=“text”/> <label for=“email”>Email</label> <input id=“email” type=“email” required aria-describedby=“email-error” /> <span class=“error” id=“email-error”> Your email… </span> <input id=“bakeoff” type=“checkbox” /> <label for=“bakeoff”>Yes, …</label> <input type=“submit” value=“Subscribe” /> 5. No color reliance Name Email* Yes, I want to be a contestant on “The Great Accessibility Bake Off.” What should I put here again? Email address must include @ sign.
  56. 56. Subscribe <label for=“name”>Name</label> <input id=“name” type=“text”/> <label for=“email”>Email</label> <input id=“email” type=“email” required aria-describedby=“email-error” /> <span class=“error” id=“email-error”> Your email… </span> <input id=“bakeoff” type=“checkbox” /> <label for=“bakeoff”>Yes, …</label> <input type=“submit” value=“Subscribe” /> 5. No color reliance Name Email* Yes, I want to be a contestant on “The Great Accessibility Bake Off.” What should I put here again? Email address must include @ sign.
  57. 57. Subscribe <label for=“name”>Name</label> <input id=“name” type=“text”/> <label for=“email”>Email</label> <input id=“email” type=“email” required aria-describedby=“email-error” /> <span class=“error” id=“email-error”> Your email… </span> <input id=“bakeoff” type=“checkbox” /> <label for=“bakeoff”>Yes, …</label> <input type=“submit” value=“Subscribe” /> 5. No color reliance Name Email* Yes, I want to be a contestant on “The Great Accessibility Bake Off.” What should I put here again? Email address must include @ sign.
  58. 58. https://www.sitepoint.com/replacing-radio-buttons-without-replacing-radio-buttons/
  59. 59. Technical Challenge
  60. 60. Our tried-and-true semantic HTML isn’t sufficient in this case.
  61. 61. Let’s follow the given ARIA recipe.
  62. 62. https://www.w3.org/TR/wai-aria-practices-1.1/#TreeView
  63. 63. https://www.w3.org/TR/wai-aria-practices-1.1/#TreeView
  64. 64. https://www.w3.org/TR/wai-aria-practices-1.1/#TreeView
  65. 65. https://www.w3.org/TR/wai-aria-practices-1.1/#TreeView
  66. 66. https://www.w3.org/TR/wai-aria-practices-1.1/#TreeView
  67. 67. What do you do if it’s not working? 1. Double check the spec 2. Double check your code 3. Google it 4. Check for known bugs in browsers and screen readers http://whoseline.a11yideas.com/bugs.html 5. Ask around! http://web-a11y.herokuapp.com/
  68. 68. http://accessibleculture.org/articles/2013/02/not-so-simple-aria-tree-views-and-screen-readers/
  69. 69. Showstopper Challenge
  70. 70. Think less about the method and more about the outcome.
  71. 71. Think less about the method and more about the outcome. Drag-and-drop Move something
  72. 72. Put into buckets
  73. 73. Put into buckets Rearrange lists
  74. 74. Put into buckets Rearrange lists Move on canvas
  75. 75. Put into buckets Rearrange lists Move on canvas
  76. 76. Salesforce’s Opportunity Kanban board
  77. 77. Salesforce’s Opportunity Kanban board
  78. 78. Salesforce’s Opportunity Kanban board
  79. 79. Putting things in buckets 1. Press Space on an item to open a menu of buckets. 2. Press Arrow keys to select a bucket in that list. 3. Press Enter to move item into that bucket. Inform user of interaction pattern: “Press space bar to select and move.”
  80. 80. Wait, what about ARIA? ● ARIA 1.0 ○ drag-and-drop authoring suggestions ○ aria-grabbed attribute ○ aria-dropeffect attribute ● ARIA 1.1 ○ no authoring suggestions ○ aria-grabbed and aria-dropeffect are deprecated ○ (but don’t worry too much!)
  81. 81. https://www.sitepoint.com/accessible-drag-drop/
  82. 82. Putting things in buckets, using ARIA spec 1. Press Space on an item to select it. 2. Optionally Ctrl+Space on other items to multi-select. 3. Press Tab key to select a bucket. 4. Press Enter or Ctrl+M to move item into that bucket. More specifics: ● ARIA Authoring Practices ● SitePoint’s Drag-and-Drop Tutorial ● WhatSock Training
  83. 83. Dropbox file browsing
  84. 84. Dropbox file browsing
  85. 85. Even more ways to move! ● Delete key for moving things into Trash bins ● Cut, Copy, and Paste support Positioning on a canvas x: 100 px 42 pxy: ● Arrow keys ● Input fields
  86. 86. Give users choice and flexibility. They’ll decide which methods are best for them.
  87. 87. Thanks! @cordeliadillon

ABSTRACT: It’s always better to bake in accessibility from the very beginning of your project than tack it on after the fact. Making accessibility decisions up front in your web app can save your users a lot of frustration and save you a lot of development time. But how do you know what to bake in, how to mix it all together, and whether you’re doing it right? (Originally presented at Respond '17: http://www.webdirections.org/respond/)

Views

Total views

696

On Slideshare

0

From embeds

0

Number of embeds

13

Actions

Downloads

0

Shares

0

Comments

0

Likes

0

×