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.

Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibility


Published on

Published in: Design, Technology
  • Be the first to comment

Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibility

  1. 1. Twin Red-Headed Stepchildren of A Different Mother: The Usability of Accessibility Michael Fienen, Pittsburg State UniversityDylan Wilbanks, ex-University of Washington HighEdWeb 2011
  2. 2. Questions, comments,complaints on Twitter: #tnt7
  3. 3.
  4. 4. I joined a rapidly growingcloud-based enterprise softwarecompany which I will not name.Hint: It’s called Apptio and we’re hiring like crazy.
  5. 5. Trading hats
  6. 6. Trading hats
  7. 7. I realized usability andaccessibility have a lot of congruencies.
  8. 8. For example•It’s always left for “later” (and “later” sometimes never comes)• People don’t design and develop with either in mind enough•And ignoring either one comes back to bite you in the end
  9. 9. The RedheadedStepchildren of the Web
  10. 10. The RedheadedStepchildren of the Web
  11. 11. Let’s get one thing clear.
  12. 12. Usability != accessibility
  13. 13. The curse of thevegetable peeler
  14. 14. “If only web accessibility had a curb cut or an OXO vegetablepeeler, then people would treatit as important as it should be!”
  15. 15. SURELY THIS
  16. 16. SURELY THIS
  17. 17. SURELY THIS
  18. 18. If you sell accessibility as “better SEO,” then you make accessibility about SEO
  19. 19. X
  20. 20. Let’s resolve to stop chasing peelers.
  21. 21. Usability can help with accessibility
  22. 22. Firehose
  23. 23. Firehose
  24. 24. See our Delicious stack:
  25. 25. Design with usabilityAND accessibility in mind
  26. 26. The earlier you thinkabout accessibility, the less work it is
  27. 27. Early, often
  28. 28. Early, often
  29. 29. Early, often
  30. 30. Lay of the Land•Implementation•Verification•Evangelization•The Takeaway
  31. 31. Implementation
  32. 32. Implementation
  33. 33. So let’s talk about three things
  34. 34. Three things1. Your Templates2. Your Forms3. Your Videos
  35. 35. 1. Your Templates
  36. 36. Ask your CMS vendor about accessibility
  37. 37. Dont blindly accept the "garbage in/garbage out" answer
  38. 38. Ask your vendor1. Are ARIA and WCAG checks baked in?2. Can you require things like alt attributes and table summaries?3. Is the CMS backend usable by someone thats blind?
  39. 39. ARIA•For most CMSs you can code in ARIA landmarks from the start•Landmarks are designed to help a screen reader understand the structure of the page (role="navigation", role="main", and role="search")
  40. 40. ARIA is more for futureproofing (support for ARIA is uneven)
  41. 41. Many new HTML5 tags are mapped to equivalent roles
  42. 42. Mind your CSS!•color contrast (minimum 4.5:1)•Avoid hiding elements entirely for the sake of accessibility (including skip to content links) ( me/)•When you use :hover, use :focus too ( whenever_you_use_hover_also_use_focus/)
  43. 43. Good semantic coding isyour first line of defensein both accessibility and usability
  44. 44. 2. Your Forms
  45. 45. Show of hands, who here loves making forms?(besides Dylan, but we all knew he was weird.)
  46. 46. Forms are a major point ofinteractivity, and ensuring it’s accessible can be difficult.
  47. 47. Can you use JavaScript and AJAX? Yes!
  48. 48. JavaScript and Accessibility•You can enhance accessibility with JavaScript + AJAX •Text sizing •Input validation•Focus on progressive enhancement
  49. 49. Theres no excuse for a form to break ifJavaScript isnt enabled.
  50. 50. Fields need labels. Good foraccessibility, and just good for users in general. <label for=”fname”>First name</label>
  51. 51. Supplement the HTML5 required property with ARIA: aria-required="true" <input name=”fname” required aria- required=”true”>
  52. 52. 3. Your Video
  53. 53. Caption your videos•Captions help more than the deaf •SEO •International users •Normal people too!
  54. 54. Dont rely on machine transcription. Srsly.
  55. 55. Farm it out instead
  56. 56. Farm it out instead
  57. 57. Farm it out instead•CastingWords•Transcribr•AutomaticSync•Starting at $1 per minute (its cheaper than a lawsuit)
  58. 58. "Produced" video likely has ascript, which can be the basis for your captions. Youre almost there already!
  59. 59. YouTube resources•Leaning on YouTube means access to good tools •Auto-timing vs machine transcription •Familiar interface•Consistency in caption tool•Keyboard accessible player•All of this INCLUDES lecture capture as well, not just marketing video.
  60. 60. Verification
  61. 61. Verification
  62. 62. Test, test, testQuantitative and qualitative
  63. 63. Do not be afraid to iterate.
  64. 64. “We can’t make itaccessible. There’s justtoo much to change.”
  65. 65. Everest is not a day hike.
  66. 66. Everest is not a day hike.
  67. 67. Tools•See the Delicious stack:•Not all accessibility guidelines can be verified through automated scanning
  68. 68. Do you have anaccessible technology lab on campus?
  69. 69. Find it. Make friendswith the facilitators and users.
  70. 70. “Do usability testing withpeople with disabilities.” -- Jared Smith
  71. 71. The principles of Rocket Surgery can be appliedeasily to accessibility testing.
  72. 72. Nothing is more powerfulthan watching someone FAIL using something you built.
  73. 73. If all else fails, try the Rough Threefold Test
  74. 74. Rough Threefold Test1. Check for colorblindness issues • In Photoshop CS5 you can easily show how an image looks to people with color blindness ( overview.html) • Alternatively, use the aforementioned color tests • Or find someone in your office with color blindness -- 7-10% of all men
  75. 75. Rough Threefold Test2. The Keyboard Test • Rip out your mouse • Try using the site without it (tab keys and arrows) • Shake your head in shame
  76. 76. Rough Threefold Test3. The Voice Browser Test • Good: Henny Swan’s tricks screen-readers-without-a-screen-reader/ •Better: Fangs plugin for Firefox, Firevox •Best: NVDA (free open source voice browser) + VoiceOver (baked into OS X)
  77. 77. Evangelization
  78. 78. Evangelization
  79. 79. Preach to the congregation, teach the elders
  80. 80. Down
  81. 81. Down
  82. 82. Down•Depends on your organizational structure•Think of it like any other tool you want to get them to use
  83. 83. It can be tough to get buy infrom people that have limited technical web experience
  84. 84. People with limited tech knowledge•Know their limitations•Address it in chunks they can process
  85. 85. Sometimes people see the importance, but stilllack implementation skills
  86. 86. Teach techniques as just "part of the process," dont break it out like its something different or extra
  87. 87. Be prepared to do it for them, but use that as an opportunity,dont view it like taking on extra work
  88. 88. Up
  89. 89. Up
  90. 90. Up•Four gambits: •Legal •Good PR •Enrollment •IT
  91. 91. The Legal Gambit•Legal is the easy option •Not great for leverage though (unfortunately) •NFB vs Penn State •Dont approach it like a threat
  92. 92. Proactive work looksway better than reactive
  93. 93. Building Code
  94. 94. Building Code
  95. 95. The Good PR Gambit•Works well if your web office is in this office•Announcing accessibility compliance can be a good buzz generator•Schools like being the first at something or comparing to other region/competitor schools
  96. 96. The Enrollment Gambit•First demonstrate some success with smaller projects•Make the case for better usability/ accessibility meaning better tools that can impact applications/enrollment
  97. 97. The IT Gambit•Approach it like a deliverable•Outline the specific requirements you expect to see met•Be sure youre talking to the right people, programmers shouldnt relay requirements to the UI people.
  98. 98. In general•Makes more sense to address the issue from the top down•Harder to fix it after the fact•Less efficient to "just launch what we have and go back and make it better later"
  99. 99. Frame the issue as being all about the experienceyour users have on the site
  100. 100. Give people with disabilitiestheir own voice, and they will give voice to your site’s accessibility problems
  101. 101. The Takeaway
  102. 102. The takeaway•Bake in accessibility early and often•Grill your CMS vendors on accessibility early and often•Test and assess early and often•Push the case for accessibility early and often•LISTEN to people with disabilities early and often
  103. 103. Accessibility isn’t easy
  104. 104. Matt May Accessibility Evangelist Adobe
  105. 105. Here’s the thing: quite often,accessibility work is time-consuming,expensive and very technical.Especially to someone who doesn’tknow all they need to know aboutit, or someone who went too fardown the wrong path beforeaccessibility was called to his or herattention.
  106. 106. Here’s the thing: quite often,accessibility work is time-consuming,expensive and very technical.Especially to someone who doesn’tknow all they need to know aboutit, or someone who went too fardown the wrong path beforeaccessibility was called to his or herattention.
  107. 107. Early, often
  108. 108. Just like usability
  109. 109. Stay simple, don’t be afraid to iterate
  110. 110. You will get it wrong(repeatedly). Just keep iterating.
  111. 111. It’s about people.Listen to your users with disabilities.
  112. 112. One more thing...
  113. 113. Usability != accessibility
  114. 114. Usability != accessibility
  115. 115. Excellent peeler
  116. 116. Excellent peeler An ergonomic grip perfect for people with arthritis
  117. 117. Universal Design
  118. 118. Universal Design
  119. 119. Universal design meansbuilding with everyone in mind
  120. 120. Usability and accessibility come together in universal design.
  121. 121. Stairsmake a building inaccessible not a wheelchair
  122. 122.
  123. 123.
  124. 124.
  125. 125.
  126. 126.
  127. 127.
  128. 128. One web for everyone
  129. 129. One web for everyone
  130. 130. Thank you
  131. 131. Thank you
  132. 132. Contact usMichael Email: Web: Twitter: @fienenDylan Email: Web: Twitter: @dylanw Thanks to @ericstoller for the inspiration