Designing accessible experiences allows you to connect with the largest minority in the world, people with disabilities. To do this we need to do 2 things. First, we need broaden how we think about disabilities to include disabilities inherent to technology. Second, we need to approach accessibility from the content out. In this deck I provide guidance for basic, but all too common, accessibility failures. The last slide contains links to several resources to get you started with accessibility. It's time we start thinking in terms of Universal Usability.

1. #soflux-uxpa #UniversalUsability
What everyone should
know about
accessibility
Jan 2019
Mike Donahue, Senior UXArchitect, Citrix
©2019 Mike Donahue
SOFLUX
PALM BEACH
TECH
WE ARE
SPONSORS
HOST

2. #soflux-uxpa #UniversalUsability
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
definition:
©2019 Mike Donahue

3. #soflux-uxpa #UniversalUsability
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.
definition:
©2019 Mike Donahue#accessibility4all

4. #soflux-uxpa #UniversalUsability
Everyone needs to know disabilities are…
©2019 Mike Donahue
…not all 100% …not all permanent …not all human

5. #soflux-uxpa #UniversalUsability
That said,
©2019 Mike Donahue
Universal usability is a human-centric goal

6. #soflux-uxpa #UniversalUsability
Global opportunity (the carrot)
©2019 Mike Donahue
1.3 billion disabled
2.4 billion friends and family
$2 trillion income
$8+ trillion friends and family
People with disabilities represent the single largest minority

7. #soflux-uxpa #UniversalUsability
Disabilities by the numbers (U.S. 2017)
©2019 Mike Donahue
VisionHearing SpeechPhysical Cognitive
2.4%3.5%4.8%6.6% ?%
https://disabilitycompendium.org/sites/default/files/user-uploads/2017_AnnualReport_2017_FINAL.pdf

8. #soflux-uxpa #UniversalUsability
Legally speaking (the stick)
©2019 Mike Donahue
395% increase
in ADA civil suits since 2005
Non-ADA cases rose only 12%
521% increase
in non-employment cases
Employment cases rose only 196%

9. #soflux-uxpa #UniversalUsability
Target targeted
©2019 Mike Donahue
$6 million
Judgement against Target vs National
Federation of the Blind (NFB) 2008
Over $13 million after legal costs

10. #soflux-uxpa #UniversalUsability
Pay now or pay later.
©2019 Mike Donahue
$755,000.00
Netflix legal fees
It took just 2 months and
$40,000.00
to fix the issues.

11. #soflux-uxpa #UniversalUsability
Non-human disabilities (constraints or limitations)
©2019 Mike Donahue
Devices Connectivity Money
Location Touch screen

12. #soflux-uxpa #UniversalUsability ©2019 Mike Donahue
Designing accessible experiences is about overcoming
human and technology limitations.
#UniversalUsability
Everyone needs to know…

13. #soflux-uxpa #UniversalUsability
Designing and developing with web
standards
©2019 Mike Donahue

14. #soflux-uxpa #UniversalUsability
WCAG 2.1 AA standard
©2019 Mike Donahue
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?
https://webaim.org/standards/wcag/checklist

15. #soflux-uxpa #UniversalUsability
Quick tip:
©2019 Mike Donahue
There’s technical accessibility (meets standard)
and then there’s functional accessibility (usable).
Functional always trumps technical.

16. #soflux-uxpa #UniversalUsability
Before we move on…
©2019 Mike Donahue
Should designers know
how to code?
Should developers know how
to design?

17. #soflux-uxpa #UniversalUsability
My very opinionated answer to both
©2019 Mike Donahue
Designers should know
code.
Developers should know
design.
Design is the plan and
blueprint.
Code is the building material.

18. #soflux-uxpa #UniversalUsability
Content
Semantic markup is the foundation of an accessible experience
©2019 Mike Donahue

19. #soflux-uxpa #UniversalUsability
Semantic markup (sectioning)
©2019 Mike Donahue
<main> or role=“main” identifies primary content
<header> or role=“banner” identifies global page header
<nav> or role=“navigation” identifies, usually, the main navigation
<article> identifies a stand alone composition like a blog post
<section> groups thematically similar content
<aside> or role=“complementary” identifies secondary content
<footer> or role=“contentinfo” identifies global footer

20. #soflux-uxpa #UniversalUsability
Semantic markup (sectioning)
©2019 Mike Donahue

21. #soflux-uxpa #UniversalUsability
Quick tip:
©2019 Mike Donahue
Don’t use an aria role
if there’s an equivalent HTML element.

22. #soflux-uxpa #UniversalUsability
Semantic markup (headings)
©2019 Mike Donahue
<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. #soflux-uxpa #UniversalUsability
Semantic markup (headings)
©2019 Mike Donahue

24. #soflux-uxpa #UniversalUsability
Semantic markup (headings)
©2019 Mike Donahue
<h1>
<h2>
<h2>
<h2>
<h3>
<h3>
<p>
<h2>
<h2>

25. #soflux-uxpa #UniversalUsability
Quick tip:
©2019 Mike Donahue
Never use heading elements for the purpose of style.

26. #soflux-uxpa #UniversalUsability
Semantic markup (inline)
©2019 Mike Donahue
Use <b> (bold) if you only want to provide 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.
Pro tip: Speak your content out loud.

27. #soflux-uxpa #UniversalUsability
UX writing is accessible
©2019 Mike Donahue
Readability is one of the 200+ ranking factors that
Google evaluates.
For a general audience aim for a Flesch-Kincaid of
Grade 8 and readability ease of 60 or higher.
Write to express, not to impress.
https://readability-score.com/
http://www.hemingwayapp.com

28. #soflux-uxpa #UniversalUsability
Images
<img alt”you’re probably using this wrong” src=“WTH.png”>
©2019 Mike Donahue

29. #soflux-uxpa #UniversalUsability
The alt attribute
©2019 Mike Donahue
Decision tree
• 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/

30. #soflux-uxpa #UniversalUsability
The alt attribute
©2019 Mike Donahue
You’re probably using it wrong.
Current
alt=“contracts and grants icon”
Better
alt=“”

31. #soflux-uxpa #UniversalUsability
The alt attribute
©2019 Mike Donahue
You’re probably using it wrong.
Current
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.”

32. #soflux-uxpa #UniversalUsability
The alt attribute
©2019 Mike Donahue
You’re probably using it wrong.
Current
alt="HHSActing 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 to the page.

33. #soflux-uxpa #UniversalUsability
Info-graphics?
©2019 Mike Donahue
Using the longdesc attribute.
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>

34. #soflux-uxpa #UniversalUsability
Info-graphics?
©2019 Mike Donahue
Using the longdesc attribute.
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>

35. #soflux-uxpa #UniversalUsability ©2019 Mike Donahue
What goes for images goes for video and audio content as
well.
#UniversalUsability
Quick tip

36. #soflux-uxpa #UniversalUsability
Color and contrast
Making things obvious
©2019 Mike Donahue

37. #soflux-uxpa #UniversalUsability
Contrast
©2019 Mike Donahue
Find the search box

38. #soflux-uxpa #UniversalUsability
Contrast
©2019 Mike Donahue
Find the visited links. Hint, there are 3.

39. #soflux-uxpa #UniversalUsability
Quick tip:
©2019 Mike Donahue
Don’t remove native affordances for the sake of style.

40. #soflux-uxpa #UniversalUsability
Color blindness
©2019 Mike Donahue
Color alone is not enough
Normal vision
Protanopia
Deuteranopia

41. #soflux-uxpa #UniversalUsability
Contrast comes in many forms
©2019 Mike Donahue
Color Shape Size Proximity

42. #soflux-uxpa #UniversalUsability
Design the obvious
©2019 Mike Donahue
Obvious always wins.
Luke Wroblewski

43. #soflux-uxpa #UniversalUsability
Fail better
Design and develop for uncertainty.
©2019 Mike Donahue

44. #soflux-uxpa #UniversalUsability
Plan for failure – it will happen
©2019 Mike Donahue
What happens when images don’t load?

45. #soflux-uxpa #UniversalUsability
Plan for failure – it will happen
©2019 Mike Donahue
What happens when images don’t load?

46. #soflux-uxpa #UniversalUsability
Plan for failure – it will happen
©2019 Mike Donahue
What happens when JavaScript doesn’t load?
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.

47. #soflux-uxpa #UniversalUsability
Plan for failure – it will happen
©2019 Mike Donahue
What happens when JavaScript doesn’t load?

48. #soflux-uxpa #UniversalUsability
Quick tip – from the pros
©2019 Mike Donahue
If the content is critical, assume the
enhancement will fail.
If it’s not, assume it will work.
Jared Smith
Associate Director, WebAIM

49. #soflux-uxpa #UniversalUsability
Accessibility is the path to innovation
Accessible designs make everyone’s life better.
©2019 Mike Donahue

50. #soflux-uxpa #UniversalUsability
Started as an accessibility problem
©2019 Mike Donahue

51. #soflux-uxpa #UniversalUsability
Meet Patricia Moore
©2019 Mike Donahue
Design is suppose to
empower people, it’s not
suppose to disable
people.Patricia Moore
Industrial designer – accessibility
pioneer and credited as one of the
founders of universal design

52. #soflux-uxpa #UniversalUsability
Patricia’s true story
©2019 Mike Donahue

53. #soflux-uxpa #UniversalUsability
Innovation through accessibility
©2019 Mike Donahue

54. #soflux-uxpa #UniversalUsability
Universal design
©2019 Mike Donahue
The power of the Web is in its
universality. Access by
everyone regardless of
disability is an essential aspect.
Sir Tim Berners-Lee

55. #soflux-uxpa #UniversalUsability
Resources
References
• WebAIM WCAG 2 checklist
• The A11Y Project
• W3C – HTML5 semantic markup
• W3C – WCAG 2.1 guidelines
• W3C – WAI-ARIA Authoring Practices
• W3C – Using ARIA
Tools
• WAVE Accessibility checker (Chrome extension)
• Readability checker
• Color contrast checker
• Color blindness checker
Books
• Designing with Web Standards
• AWeb for Everyone
• Adaptive Design
• HTML forWeb Designers
• CSS for Web Designers
Videos
• Austin Seraphin – coder
• British guys – jogging
• Blind architect
©2019 Mike Donahue