Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibility
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
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
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
futureprooďŹng (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 ďŹrst line of defense
in both accessibility and
usability
57. JavaScript and
Accessibility
â˘You can enhance accessibility with
JavaScript + AJAX
â˘Text sizing
â˘Input validation
â˘Focus on progressive enhancement
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.
76. Tools
â˘See the Delicious stack: http://bit.ly/tnt7
â˘Not all accessibility guidelines can be
veriďŹed 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 ďŹnd someone in your ofďŹce 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)
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
102. Building Code
http://www.ďŹickr.com/photos/ckindel/5432155787/
103. Building Code
http://www.ďŹickr.com/photos/ckindel/5432155787/
104. The Good PR Gambit
â˘Works well if your web ofďŹce is in this
ofďŹce
â˘Announcing accessibility compliance
can be a good buzz generator
â˘Schools like being the ďŹrst 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 speciďŹc 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 ďŹx it after the fact
â˘Less efďŹcient 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
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
113. Matt May
Accessibility Evangelist
Adobe
http://www.ďŹickr.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/
143. Contact us
Michael
Email: michael@nucloud.com
Web: ďŹenen.com
Twitter: @ďŹenen
Dylan
Email: wnalyd@gmail.com
Web: dylanwilbanks.com
Twitter: @dylanw
Thanks to @ericstoller for the inspiration
Hinweis der Redaktion
\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’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’s at.\n
This is the Olympic Sculpture Park in Seattle. It’s a large outdoor space next to the Puget Sound to display the art museum’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