1. Twin Red-Headed Stepchildren of A Different
Mother: The Usability of Accessibility
Michael Fienen, Pittsburg State University
Dylan Wilbanks, ex-University of Washington
HighEdWeb 2011

2. Questions, comments,
complaints on Twitter:
#tnt7

3. http://www.flickr.com/photos/cronncc/5101603572/

4. I joined a rapidly growing
cloud-based enterprise software
company which I will not name.
Hint: It’s called Apptio and we’re hiring like crazy.

5. Trading hats
http://www.flickr.com/photos/87255087@N00/311428426/

6. Trading hats
http://www.flickr.com/photos/87255087@N00/311428426/

7. I realized usability and
accessibility have a lot
of congruencies.

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. The Redheaded
Stepchildren of the Web
http://www.flickr.com/photos/e3000/6158888518/

10. The Redheaded
Stepchildren of the Web
http://www.flickr.com/photos/e3000/6158888518/

11. Let’s get one thing clear.

12. Usability != accessibility

13. The curse of the
vegetable peeler

21. “If only web accessibility had a
curb cut or an OXO vegetable
peeler, then people would treat
it as important as it should be!”

22. SURELY
THIS

23. SURELY
THIS

24. SURELY
THIS

25. If you sell accessibility as
“better SEO,” then you
make accessibility about
SEO

28. X

29. Let’s resolve to stop
chasing peelers.

30. Usability can help with
accessibility

31. Firehose
http://www.flickr.com/photos/joshbousel/264482069/

32. Firehose
http://www.flickr.com/photos/joshbousel/264482069/

33. See our Delicious stack:
http://bit.ly/tnt7

34. Design with usability
AND accessibility in mind

35. The earlier you think
about accessibility, the
less work it is

36. Early, often

37. Early, often

38. Early, often

39. Lay of the Land
•Implementation
•Verification
•Evangelization
•The Takeaway

40. Implementation
http://www.flickr.com/photos/35188692@N00/2392520183/

41. Implementation
http://www.flickr.com/photos/35188692@N00/2392520183/

42. So let’s talk about
three things

43. Three things
1. Your Templates
2. Your Forms
3. Your Videos

44. 1. Your Templates

45. Ask your CMS vendor
about accessibility

46. Don't blindly accept
the "garbage in/
garbage out" answer

47. Ask your vendor
1. 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 that's blind?

48. 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")

49. ARIA is more for
futureproofing (support
for ARIA is uneven)
http://www.accessibleculture.org/articles/2011/04/html5-aria-2011/Text

50. Many new HTML5 tags
are mapped to
equivalent roles
http://www.html5accessibility.com/tests/landmarks.html

51. 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/)

52. Good semantic coding is
your first line of defense
in both accessibility and
usability

53. 2. Your Forms

54. Show of hands, who
here loves making
forms?
(besides Dylan, but we all knew he was weird.)

55. Forms are a major point of
interactivity, and ensuring it’s
accessible can be difficult.

56. Can you use JavaScript
and AJAX? Yes!

57. JavaScript and
Accessibility
•You can enhance accessibility with
JavaScript + AJAX
•Text sizing
•Input validation
•Focus on progressive enhancement

58. There's no excuse for a
form to break if
JavaScript isn't enabled.

59. Fields need labels. Good for
accessibility, and just good for users in
general.
<label for=”fname”>First name</label>

60. Supplement the HTML5 required property
with ARIA: aria-required="true"
<input name=”fname” required aria-
required=”true”>

61. 3. Your Video

62. Caption your videos
•Captions help more than the deaf
•SEO
•International users
•Normal people too!

63. Don't rely on machine
transcription. Srsly.
http://mashable.com/2010/03/05/youtube-caption-fail/

64. Farm it out instead

65. Farm it out instead

66. Farm it out instead
•CastingWords
•Transcribr
•AutomaticSync
•Starting at $1 per minute (it's cheaper
than a lawsuit)

67. "Produced" video likely has a
script, which can be the basis for
your captions. You're almost
there already!

68. 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.

69. Verification
http://www.flickr.com/photos/wallyg/3964329905/

70. Verification
http://www.flickr.com/photos/wallyg/3964329905/

71. Test, test, test
Quantitative and qualitative

72. Do not be afraid
to iterate.

73. “We can’t make it
accessible. There’s just
too much to change.”

74. Everest is not a day hike.

75. Everest is not a day hike.

76. Tools
•See the Delicious stack: http://bit.ly/tnt7
•Not all accessibility guidelines can be
verified through automated scanning

77. Do you have an
accessible technology
lab on campus?

78. Find it. Make friends
with the facilitators and
users.

79. “Do usability testing with
people with disabilities.”
-- Jared Smith
http://webaim.org/blog/accessibility-user-testing/

80. The principles of Rocket
Surgery can be applied
easily to accessibility testing.

81. Nothing is more powerful
than watching someone FAIL
using something you built.

82. If all else fails, try the
Rough Threefold Test

83. Rough Threefold Test
1. 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

84. Rough Threefold Test
2. The Keyboard Test
• Rip out your mouse
• Try using the site without it (tab keys
and arrows)
• Shake your head in shame

85. Rough Threefold Test
3. 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)

86. Evangelization
http://www.flickr.com/photos/mulmatsherm/2221223106/

87. Evangelization
http://www.flickr.com/photos/mulmatsherm/2221223106/

88. Preach to the congregation,
teach the elders

89. Down

90. Down

91. Down
•Depends on your organizational
structure
•Think of it like any other tool you want
to get them to use

92. It can be tough to get buy in
from people that have limited
technical web experience

93. People with limited tech
knowledge
•Know their limitations
•Address it in chunks they can process

94. Sometimes people see
the importance, but still
lack implementation skills

95. Teach techniques as just "part of
the process," don't break it out
like it's something different or
extra

96. Be prepared to do it for them,
but use that as an opportunity,
don't view it like taking on extra
work

97. Up

98. Up

99. Up
•Four gambits:
•Legal
•Good PR
•Enrollment
•IT

100. The Legal Gambit
•Legal is the easy option
•Not great for leverage though
(unfortunately)
•NFB vs Penn State
•Don't approach it like a threat

101. Proactive work looks
way better than reactive

102. Building Code
http://www.flickr.com/photos/ckindel/5432155787/

103. Building Code
http://www.flickr.com/photos/ckindel/5432155787/

104. 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

105. 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

106. The IT Gambit
•Approach it like a deliverable
•Outline the specific requirements you
expect to see met
•Be sure you're talking to the right
people, programmers shouldn't relay
requirements to the UI people.

107. 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"

108. Frame the issue as being
all about the experience
your users have on the site

109. Give people with disabilities
their own voice, and they will
give voice to your site’s
accessibility problems

110. The Takeaway

111. 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

112. Accessibility isn’t easy

113. Matt May
Accessibility Evangelist
Adobe
http://www.flickr.com/photos/stewtopia/2280080016/

114. Here’s the thing: quite often,
accessibility work is time-consuming,
expensive and very technical.
Especially to someone who doesn’t
know all they need to know about
it, or someone who went too far
down the wrong path before
accessibility was called to his or her
attention.
http://www.bestkungfu.com/archive/date/2011/01/accessibility-myth-myths/

115. Here’s the thing: quite often,
accessibility work is time-consuming,
expensive and very technical.
Especially to someone who doesn’t
know all they need to know about
it, or someone who went too far
down the wrong path before
accessibility was called to his or her
attention.
http://www.bestkungfu.com/archive/date/2011/01/accessibility-myth-myths/

116. Early, often

117. Just like usability

118. Stay simple, don’t be
afraid to iterate

119. You will get it wrong
(repeatedly). Just keep
iterating.

120. It’s about people.
Listen to your users with
disabilities.

121. One more thing...

123. Usability != accessibility

124. Usability != accessibility

126. Excellent
peeler

127. Excellent
peeler
An ergonomic
grip perfect for
people with
arthritis

128. Universal Design

129. Universal Design

130. Universal design means
building with everyone
in mind

131. Usability and accessibility
come together in
universal design.

132. http://www.slideshare.net/wendyabc/inclusive-universe-2010
Stairs
make a building
inaccessible
not a
wheelchair

133. http://www.flickr.com/photos/casaschmidt/357913407/

134. http://www.flickr.com/photos/teamlane/5900499333/

135. http://www.flickr.com/photos/dougtone/6015139932/

136. http://www.flickr.com/photos/dougtone/6015129404/

137. http://www.flickr.com/photos/rosasay/6101284990/

138. http://www.flickr.com/photos/lisastown/3459474012/

139. One web for everyone

140. One web for everyone

141. Thank you

142. Thank you

143. Contact us
Michael
Email: michael@nucloud.com
Web: fienen.com
Twitter: @fienen
Dylan
Email: wnalyd@gmail.com
Web: dylanwilbanks.com
Twitter: @dylanw
Thanks to @ericstoller for the inspiration