Your SlideShare is downloading. ×
0
Twin Red-Headed Stepchildren of A Different    Mother: The Usability of Accessibility Michael Fienen, Pittsburg State Univ...
Questions, comments,complaints on Twitter:        #tnt7
http://www.flickr.com/photos/cronncc/5101603572/
I joined a rapidly growingcloud-based enterprise softwarecompany which I will not name.Hint: It’s called Apptio and we’re ...
Trading hats   http://www.flickr.com/photos/87255087@N00/311428426/
Trading hats   http://www.flickr.com/photos/87255087@N00/311428426/
I realized usability andaccessibility have a lot    of congruencies.
For example•It’s always left for “later” (and  “later” sometimes never comes)• People don’t design and develop  with eithe...
The RedheadedStepchildren of the Web         http://www.flickr.com/photos/e3000/6158888518/
The RedheadedStepchildren of the Web         http://www.flickr.com/photos/e3000/6158888518/
Let’s get one thing clear.
Usability != accessibility
The curse of thevegetable peeler
“If only web accessibility had a curb cut or an OXO vegetablepeeler, then people would treatit as important as it should b...
SURELY THIS
SURELY THIS
SURELY THIS
If you sell accessibility as “better SEO,” then you make accessibility about            SEO
X
Let’s resolve to stop  chasing peelers.
Usability can help with     accessibility
Firehose http://www.flickr.com/photos/joshbousel/264482069/
Firehose http://www.flickr.com/photos/joshbousel/264482069/
See our Delicious stack:   http://bit.ly/tnt7
Design with usabilityAND accessibility in mind
The earlier you thinkabout accessibility, the    less work it is
Early, often
Early, often
Early, often
Lay of the Land•Implementation•Verification•Evangelization•The Takeaway
Implementation   http://www.flickr.com/photos/35188692@N00/2392520183/
Implementation   http://www.flickr.com/photos/35188692@N00/2392520183/
So let’s talk about   three things
Three things1. Your Templates2. Your Forms3. Your Videos
1. Your Templates
Ask your CMS vendor about accessibility
Dont blindly accept  the "garbage in/garbage out" answer
Ask your vendor1. Are ARIA and WCAG checks baked in?2. Can you require things like alt attributes   and table summaries?3....
ARIA•For most CMSs you can code in ARIA  landmarks from the start•Landmarks are designed to help a  screen reader understa...
ARIA is more for       futureproofing (support         for ARIA is uneven)http://www.accessibleculture.org/articles/2011/04...
Many new HTML5 tags      are mapped to     equivalent roleshttp://www.html5accessibility.com/tests/landmarks.html
Mind your CSS!•color contrast (minimum 4.5:1)•Avoid hiding elements entirely for the  sake of accessibility (including ski...
Good semantic coding isyour first line of defensein both accessibility and        usability
2. Your Forms
Show of hands, who here loves making       forms?(besides Dylan, but we all knew he was weird.)
Forms are a major point ofinteractivity, and ensuring it’s  accessible can be difficult.
Can you use JavaScript   and AJAX? Yes!
JavaScript and        Accessibility•You can enhance accessibility with  JavaScript + AJAX •Text sizing •Input validation•F...
Theres no excuse for a    form to break ifJavaScript isnt enabled.
Fields need labels. Good foraccessibility, and just good for users in                 general. <label for=”fname”>First na...
Supplement the HTML5 required property    with ARIA: aria-required="true"  <input name=”fname” required aria-           re...
3. Your Video
Caption your videos•Captions help more than the deaf •SEO •International users •Normal people too!
Dont rely on machine   transcription. Srsly.http://mashable.com/2010/03/05/youtube-caption-fail/
Farm it out instead
Farm it out instead
Farm it out instead•CastingWords•Transcribr•AutomaticSync•Starting at $1 per minute (its cheaper  than a lawsuit)
"Produced" video likely has ascript, which can be the basis for   your captions. Youre almost          there already!
YouTube resources•Leaning on YouTube means access to good tools •Auto-timing vs machine transcription •Familiar interface•...
Verification    http://www.flickr.com/photos/wallyg/3964329905/
Verification    http://www.flickr.com/photos/wallyg/3964329905/
Test, test, testQuantitative and qualitative
Do not be afraid   to iterate.
“We can’t make itaccessible. There’s justtoo much to change.”
Everest is not a day hike.
Everest is not a day hike.
Tools•See the Delicious stack: http://bit.ly/tnt7•Not all accessibility guidelines can be  verified through automated scann...
Do you have anaccessible technology   lab on campus?
Find it. Make friendswith the facilitators and          users.
“Do usability testing withpeople with disabilities.”     -- Jared Smithhttp://webaim.org/blog/accessibility-user-testing/
The principles of Rocket  Surgery can be appliedeasily to accessibility testing.
Nothing is more powerfulthan watching someone FAIL  using something you built.
If all else fails, try the Rough Threefold Test
Rough Threefold Test1. Check for colorblindness issues      • In Photoshop CS5 you can easily show how         an image lo...
Rough Threefold Test2. The Keyboard Test • Rip out your mouse • Try using the site without it (tab keys    and arrows) • S...
Rough Threefold Test3. The Voice Browser Test  •http://www.iheni.com/quick-tip-testing-web-content-for-   Good: Henny Swan...
Evangelization    http://www.flickr.com/photos/mulmatsherm/2221223106/
Evangelization    http://www.flickr.com/photos/mulmatsherm/2221223106/
Preach to the congregation,     teach the elders
Down
Down
Down•Depends on your organizational  structure•Think of it like any other tool you want  to get them to use
It can be tough to get buy infrom people that have limited   technical web experience
People with limited tech      knowledge•Know their limitations•Address it in chunks they can process
Sometimes people see the importance, but stilllack implementation skills
Teach techniques as just "part of the process," dont break it out  like its something different or                extra
Be prepared to do it for them, but use that as an opportunity,dont view it like taking on extra               work
Up
Up
Up•Four gambits: •Legal •Good PR •Enrollment •IT
The Legal Gambit•Legal is the easy option •Not great for leverage though   (unfortunately) •NFB vs Penn State •Dont approa...
Proactive work looksway better than reactive
Building Code    http://www.flickr.com/photos/ckindel/5432155787/
Building Code    http://www.flickr.com/photos/ckindel/5432155787/
The Good PR Gambit•Works well if your web office is in this  office•Announcing accessibility compliance  can be a good buzz ...
The Enrollment Gambit•First demonstrate some success with  smaller projects•Make the case for better usability/  accessibi...
The IT Gambit•Approach it like a deliverable•Outline the specific requirements you  expect to see met•Be sure youre talking...
In general•Makes more sense to address the  issue from the top down•Harder to fix it after the fact•Less efficient to "just ...
Frame the issue as being all about the experienceyour users have on the site
Give people with disabilitiestheir own voice, and they will   give voice to your site’s    accessibility problems
The Takeaway
The takeaway•Bake in accessibility early and often•Grill your CMS vendors on accessibility early  and often•Test and asses...
Accessibility isn’t easy
Matt May        Accessibility Evangelist        Adobehttp://www.flickr.com/photos/stewtopia/2280080016/
Here’s the thing: quite often,accessibility work is time-consuming,expensive and very technical.Especially to someone who ...
Here’s the thing: quite often,accessibility work is time-consuming,expensive and very technical.Especially to someone who ...
Early, often
Just like usability
Stay simple, don’t be   afraid to iterate
You will get it wrong(repeatedly). Just keep       iterating.
It’s about people.Listen to your users with         disabilities.
One more thing...
Usability != accessibility
Usability != accessibility
Excellent peeler
Excellent peeler            An ergonomic            grip perfect for             people with                arthritis
Universal Design
Universal Design
Universal design meansbuilding with everyone        in mind
Usability and accessibility   come together in   universal design.
http://www.slideshare.net/wendyabc/inclusive-universe-2010    Stairsmake a building  inaccessible                         ...
http://www.flickr.com/photos/casaschmidt/357913407/
http://www.flickr.com/photos/teamlane/5900499333/
http://www.flickr.com/photos/dougtone/6015139932/
http://www.flickr.com/photos/dougtone/6015129404/
http://www.flickr.com/photos/rosasay/6101284990/
http://www.flickr.com/photos/lisastown/3459474012/
One web for everyone
One web for everyone
Thank you
Thank you
Contact usMichael    Email: michael@nucloud.com    Web: fienen.com    Twitter: @fienenDylan    Email: wnalyd@gmail.com    We...
Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibility
Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibility
Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibility
Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibility
Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibility
Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibility
Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibility
Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibility
Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibility
Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibility
Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibility
Upcoming SlideShare
Loading in...5
×

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

1,994

Published on

Published in: Design, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,994
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Always. Be. Testing.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Design can create barriers or connections. \n\nIncluding people with disabilities will increase your audience. When those products are also beautiful they will empower your customers. And there&amp;#x2019;s a good chance that what you do will be innovative.\nIf the way to contributing is blocked by stairs then we lose out. In this economy, we need innovation. I tell ya, this is where it&amp;#x2019;s at.\n
  • This is the Olympic Sculpture Park in Seattle. It&amp;#x2019;s a large outdoor space next to the Puget Sound to display the art museum&amp;#x2019;s public art. But it was also built with accessibility in mind -- and with a central path designed for universal access. So anyone can walk or roll through the site. The signs are in Braille. It is not perfectly accessible, but they started with universal design and they built a public space that gives everyone in the city a public place to be and enjoy outdoor art.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "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. http://www.flickr.com/photos/cronncc/5101603572/
    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 http://www.flickr.com/photos/87255087@N00/311428426/
    6. 6. Trading hats http://www.flickr.com/photos/87255087@N00/311428426/
    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 http://www.flickr.com/photos/e3000/6158888518/
    10. 10. The RedheadedStepchildren of the Web http://www.flickr.com/photos/e3000/6158888518/
    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 http://www.flickr.com/photos/joshbousel/264482069/
    23. 23. Firehose http://www.flickr.com/photos/joshbousel/264482069/
    24. 24. See our Delicious stack: http://bit.ly/tnt7
    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 http://www.flickr.com/photos/35188692@N00/2392520183/
    32. 32. Implementation http://www.flickr.com/photos/35188692@N00/2392520183/
    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)http://www.accessibleculture.org/articles/2011/04/html5-aria-2011/Text
    41. 41. Many new HTML5 tags are mapped to equivalent roleshttp://www.html5accessibility.com/tests/landmarks.html
    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) (http://www.alistapart.com/articles/now-you-see- me/)•When you use :hover, use :focus too (http://www.456bereastreet.com/archive/201004/ 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.http://mashable.com/2010/03/05/youtube-caption-fail/
    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 http://www.flickr.com/photos/wallyg/3964329905/
    61. 61. Verification http://www.flickr.com/photos/wallyg/3964329905/
    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: http://bit.ly/tnt7•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 Smithhttp://webaim.org/blog/accessibility-user-testing/
    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 (http://www.adobe.com/accessibility/products/photoshop/ 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 •http://www.iheni.com/quick-tip-testing-web-content-for- 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 http://www.flickr.com/photos/mulmatsherm/2221223106/
    78. 78. Evangelization http://www.flickr.com/photos/mulmatsherm/2221223106/
    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 http://www.flickr.com/photos/ckindel/5432155787/
    94. 94. Building Code http://www.flickr.com/photos/ckindel/5432155787/
    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 Adobehttp://www.flickr.com/photos/stewtopia/2280080016/
    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. http://www.bestkungfu.com/archive/date/2011/01/accessibility-myth-myths/
    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. http://www.bestkungfu.com/archive/date/2011/01/accessibility-myth-myths/
    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. http://www.slideshare.net/wendyabc/inclusive-universe-2010 Stairsmake a building inaccessible not a wheelchair
    122. 122. http://www.flickr.com/photos/casaschmidt/357913407/
    123. 123. http://www.flickr.com/photos/teamlane/5900499333/
    124. 124. http://www.flickr.com/photos/dougtone/6015139932/
    125. 125. http://www.flickr.com/photos/dougtone/6015129404/
    126. 126. http://www.flickr.com/photos/rosasay/6101284990/
    127. 127. http://www.flickr.com/photos/lisastown/3459474012/
    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: michael@nucloud.com Web: fienen.com Twitter: @fienenDylan Email: wnalyd@gmail.com Web: dylanwilbanks.com Twitter: @dylanw Thanks to @ericstoller for the inspiration
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×