In this deck I aim to broaden our definitions of accessibility and disability to create a more effective and useful mindset to approach the challenge. To be clear, web accessibility is not a simple of matter of "designing for blind people." It's not even just about hman disabilities. Accessibility is also not the sole responsibility if developers. While code plays a critical role in accessibility the real challenge, and the majority accessibility failure, comes in the form of content and visual design. If reaching the largest possible audience is a primary goal you'll need to be accessible. Enjoy.

1. Designing for Accessibility
Feb 2016
Mike Donahue
UX Architect, Citrix
@mdonahue37

2. “An accessible web is a better
web for smartphones and other
devices, showing how we all
benefit from the inclusive
mindset.”
Sir Tim Berners-Lee

3. What does it mean to
be accessible?

4. © 2016 Mike Donahue
definition:
accessible
• (of an object, service, or facility) able to be easily
obtained or used
• easily understood
• able to be reached or entered by people who have a
disability
• (of a person) friendly and easy to talk to;
approachable

5. © 2016 Mike Donahue
“I (we) don’t build websites for blind people.”
Disabilities are not absolute or permanent conditions.

6. © 2016 Mike Donahue

7. © 2016 Mike Donahue
• Visually impaired
– Blind, poor vision, low contrast, color blind
• Hearing impaired
– Deaf, poor hearing
• Physically impaired
– Missing limbs, diminished dexterity, impaired motor-function
form diseases like Parkinson’s, fat fingers, prone to seizure
from visual stimuli
• Cognitively impaired
– Slow, difficulty concentrating, remembering, or making
decisions, technically challenged
• Non-permanent injuries
http://www.disabilitycompendium.org/docs/default-source/2014-compendium/annual-report.pdf
8.8%
16.0%
32.9%
?%
Unable to locate statistic

8. © 2016 Mike Donahue
• Visually impaired
– Blind, poor vision, low contrast, color blind
• Hearing impaired
– Deaf, poor hearing
• Physically impaired
– Missing limbs, diminished dexterity, impaired motor-function
form diseases like Parkinson’s, fat fingers, prone to seizure
from visual stimuli
• Cognitively impaired
– Slow, difficulty concentrating, remembering, or making
decisions, technically challenged
• Non-permanent injuries
Types of disabilities
12-19%±
of Americans have
some form of disability
as of 2014
http://www.disabilitycompendium.org/docs/default-source/2014-compendium/annual-report.pdf

9. © 2016 Mike Donahue
Not all disabilities are human limitations.

10. © 2016 Mike Donahue
definition:
disability
• (of anything) restricted capability to perform
particular activities
• (of person) a physical or mental condition that limits
a person's movements, senses, or activities.

11. © 2016 Mike Donahue
• Less capable browser or device
• Slow network connections, high latency
• Data plan limits and economics
• Small, monochrome, or low quality screens
• No mouse, imprecise pointing devices
• Virtual keyboards
Non-human disabilities
(constraints or limitations)

12. © 2016 Mike Donahue
Accessibility is about overcoming all limitations.

13. How do we assess
accessibility?

14. © 2016 Mike Donahue
WCAG 2.0 level AA
Meets or exceeds 508 Compliance
Minimum
Accessibility
Requirements

15. © 2015 Citrix | Confidential
http://webaim.org/standards/wcag/checklist
http://www.hhs.gov/web/section-
508/making-files-
accessible/checklist/html/index.html#
Checklists

16. © 2016 Mike Donahue
WCAG Principles – P.O.U.R.
• Perceivable
– Can it be perceived by more than one sense?
• Operable
– Can it be operated by more than one method?
• Understandable
– Is it obvious in its intended use or meaning?
• Robust
– How well does it fail?

17. © 2016 Mike Donahue
There’s technical accessibility and then
there’s functional accessibility.
Function always trumps technical

18. What does
accessibility look like?

19. © 2016 Mike Donahue
Most of your accessibility issues are content related

20. © 2016 Mike Donahue
Write to express, not impress
No 508 or WCAG criteria to meet,
be understandable.
For a general audience aim for a
Flesch-Kincaid of Grade 8 and
readability ease of 60 or higher.
https://readability-score.com/

21. © 2016 Mike Donahue
Write to express, not impress
No 508 or WCAG criteria to meet,
be understandable.
Hemingway App
https://readability-score.com/

22. © 2016 Mike Donahue
Headings are for structure not style
Complies with: 508; 4.2, 15.4, 15.5 / WCAG; 1.3.1, 2.4.10
<h1>Only one h1 per page</h1>
<h2>Use headings to denote sections</h2>
<h3>Don’t skip heading levels going down</h3>
<h4>Don’t use heading tags for sub-heads </h4>
<h5>Don’t use headings just for their style</h5>
<h6>Headings provide landmarks for screen readers</h6>

23. © 2015 Citrix | Confidential
<h1>
<h2>
<h2>
<h2>
<h3>
<h3>
<p>
<h2>
<h2>

24. © 2015 Citrix | Confidential
Headings in Mac/iOS
VoiceOver WebRotor

25. © 2016 Mike Donahue
Semantic markup – inline
Complies with: 508; 4.2, 15.4, 15.5 / WCAG; 1.3.1, 2.4.10
Use <b> (bold) if you only want to give something visual prominence.
Use <strong> if you need to raise your voice like using ALL CAPS when texting.
Use <i> if only need to provide a visual difference.
Use <em> when you need to emphasize content or change voice.
Hint: Speak your content out loud.

26. © 2016 Mike Donahue
Semantic markup – sectioning
Complies with: 508; 4.2, 15.4, 15.5 / WCAG; 1.3.1, 2.4.10
Use <main> or role=“main” to identify the core content of a page.
Use <header> or role=“banner” to identify global page heading content.
Use <nav> or role=“navigation” to contain, usually, the main navigation.
Use <article> to identify a stand alone composition like a blog post.
Use <section> to group thematically similar content.
Use <aside> or role=“complementary” to identify secondary content like a sidebar.
Use <footer> or role=“contentinfo” to identify global footer content.

27. © 2016 Mike Donahue
Alternative text images – alt tag
• Empty alt tag is correct for purely
decorative images
• Don’t start alt text with; “Image of…”,
“Picture of…”, or similar. It’s redundant
to screen readers
• Don’t use the file name for alt text.
http://www.4syllables.com.au/2010/12/text-alternatives-decision-tree/
Complies with: 508; 3.5/ WCAG; 1.4.1

28. © 2015 Citrix | Confidential
alt=“contracts and grants icon”
Better: alt=“”

29. © 2015 Citrix | Confidential
alt="Read a blog post about taking care of
your heart during American Heart Month.”
Better: alt="Mary K. Wakefield and Sylvia
M. Burwell pose for a picture to promote
the #ILoveMyHeart campaign.”

30. © 2015 Citrix | Confidential
alt="HHS Acting Deputy Secretary Mary
K. Wakefield and HHS Secretary Sylvia
M. Burwell pose for a picture to promote
the #ILoveMyHeart campaign.
#ILoveMyHeart by: finding time to hike
back home in North Dakota (Mary K.
Wakefield). #ILoveMyHeart by: eating
heal”
Better: add a caption under the photo

31. © 2016 Mike Donahue
Use longdesc=“” for complex images
Bonus: a long description provides SEO
rich text for web crawlers to index.
<img src=“accessibility-infographic.jpg”
longdesc=“#infographic-description”>
<section id=“infographic-description”>
<h2>Why is accessibility important?</h2>
<p>Types of impairments that affect how people
use your digital product are; visual, auditory,
cognitive, and mobility.</p>…
</section>
http://www.webteacher.ws/2015/07/15/accessibility-important-infographic/
Complies with: 508; 1.4 / WCAG; 1.1.1

32. © 2016 Mike Donahue
Use longdesc=“” for complex images
Bonus: a long description provides SEO
rich text for web crawlers to index.
<img src=“accessibility-infographic.jpg”
longdesc=“#infographic-description”>
<section id=“infographic-description”>
<h2>Why is accessibility important?</h2>
<p>Types of impairments that affect how people
use your digital product are; visual, auditory,
cognitive, and mobility.</p>…
</section>
http://www.webteacher.ws/2015/07/15/accessibility-important-infographic/
Complies with: 508; 1.4 / WCAG; 1.1.1

33. © 2016 Mike Donahue
Contrast - links
WCAG level AA requires a contrast ratio of
4.5:1 for normal text and 3:1 for large text (14
point and bold or larger, or 18 point or larger).
Complies with: 508; 3.5/ WCAG; 1.4.1
There are 3 visited
links in the text.

34. © 2016 Mike Donahue
Contrast - links
WCAG level AA requires a contrast ratio of
4.5:1 for normal text and 3:1 for large text (14
point and bold or larger, or 18 point or larger).
Complies with: 508; 3.5/ WCAG; 1.4.1

35. © 2016 Mike Donahue
Contrast – without images
Complies with: 508; 3.3/ WCAG; na

36. © 2016 Mike Donahue
Contrast – without images
Complies with: 508; 3.3/ WCAG; na

37. © 2016 Mike Donahue
Contrast
Subtly helps no one.

38. © 2016 Mike Donahue
Color blindness
Complies with: 508; 3.1, 3.5, 4.1 / WCAG; 1.4.1
Normal
vision
Protanopia Deuteranopia

39. Progressive
enhancement is the
cousin of accessibility?

40. © 2016 Mike Donahue
Accessible enhancements
with JavaScript without JavaScript

41. © 2016 Mike Donahue
Accessible enhancements – fail well
with JavaScript without JavaScript
Well this doesn’t
seem right.
Our sight relies on JavaScript to
deliver the music you love. Please
check that it’s enabled in your
browser and try reloading the page.
You will be judged by how well you fail.

42. © 2016 Mike Donahue
“”Jared Smith, WebAIM
“If the content is critical, assume the
enhancement will fail.
If it’s not, assume it will work.”

43. © 2016 Mike Donahue
Accessible enhancements
with JavaScript without JavaScript

44. Who’s responsible for
accessibility?

45. © 2016 Mike Donahue
• Development - YES
• Creative (visual design) - YES
• Content authors (text/audio/video) - YES
• UX - YES
• Production - YES
• Strategy - YES
• Executive leadership - YES
Everyone is
responsible

46. The cost of accessibility

47. © 2016 Mike Donahue
“”
Companies can expect to pay about 10% of their total
website costs on retrofitting. But if they phase in
accessibility as they naturally upgrade their website,
they usually spend much less — between 1% and 3%
Tim Springer
Chief Executive of SSB BART Group

48. © 2016 Mike Donahue
$6 Million*
vs NATIONAL FEDERATION OF THE BLIND (NFB)
2008
*almost $13 million including legal fee

49. © 2015 Citrix | Confidential
US companies that
have been sued
20102009
2012 2000, 2013 & 2015
2009
2013
2008
It’s not only in the US
2014
20072000
2009 2010

50. © 2016 Mike Donahue
Settlement details*
2 years to implement
Legal fees $755,000.00
Implementation $40,000.00
$795,000.002013
* Under appeal in 2015, may be overturned due to being an internet only business.
Results
Completed compliance obligations in 2 months.
100% of original content is now compliant.

51. Accessibility leads to
innovation

52. © 2015 Citrix | Confidential
Retractable
stairs

53. © 2015 Citrix | Confidential
https://www.oxo.com/our-roots

54. © 2015 Citrix | Confidential
Direction on
Google maps are a
result of building
for accessibility.

55. © 2016 Mike Donahue
• http://www.hhs.gov/web/section-508/making-files-
accessible/checklist/html/index.html
• http://webaim.org/standards/wcag/checklist
• http://wave.webaim.org/
• http://webaim.org/resources/contrastchecker/
• http://www.color-blindness.com/coblis-color-
blindness-simulator/
• https://readability-score.com/
• Wave plugin for Chrome
Resources

56. © 2016 Mike Donahue
Accessibility is about overcoming all limitations.
Both human and technical

57. Thank you
Mike Donahue
UX Architect, Citrix
@mdonahue37