Design with accessibility in mind

Designing and developing
with Accessibility in Mind
Feb 2017
Mike Donahue
UX Architect, Citrix
@mdonahue37 #UXDS2017

“The power of the Web is in its
universality. Access by
everyone regardless of
disability is an essential aspect.
Sir Tim Berners-Lee

How do you feel
about accessible?
What about people
you work with?

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

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

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.

60
to75
percent
of people
need glasses
to read anything
including your content

• 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, prone to seizure from visual
stimuli, or fat fingers
• 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

• Blind
• Deaf
• Missing limbs

Not all disabilities are human limitations.

• 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)

Designing for accessibility overcomes all
limitations for people and technology.

WCAG 2.0 level AA
Meets or exceeds 508 Compliance
Minimum
Accessibility
Requirements

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?

Perceivable
Can it be perceived by
more than one sense?

“”
Obvious always wins.
Luke Wroblewski

Perceivable

Contrast - links
Can you find the three visited links?
Complies with: 508; 3.5/ WCAG; 1.4.1

Contrast - links
http://contrastchecker.com

Contrast check your brand colors

Color blindness
Complies with: 508; 3.1, 3.5, 4.1 / WCAG; 1.4.1
Normal vision
Protanopia
Deuteranopia

Operable
Can it be operated by
more than one method?

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

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, use a paragraph tag</h4>
<h5>Don’t use headings just for their style</h5>
<h6>Headings provide landmarks for screen readers</h6>

Landmarks in Mac/iOS
VoiceOver WebRotor

Semantic markup – sectioning
Use <main> or <div role=“main”> to identify the core content of a page.
Use <header> or <div role=“banner”> to identify global page heading content.
Use <nav> or <div role=“navigation”> to the main navigation.
Use <aside> or <div role=“complementary”> to identify secondary content like a sidebar.
Use <footer> or <div role=“contentinfo”> to identify global footer content.
Use <article> or <div role=“article”> to identify a stand alone composition like a blog post.
Use <section> or <div role=“region”> to group thematically similar content.

Understandable
Is it obvious in its intended
use or meaning?

Semantic markup – inline
Use <strong> if you need to raise your voice like using ALL CAPS when texting.
Use <em> when you need to emphasize content or change voice.
Use <b> (bold) if you only want to give something visual prominence.
Use <i> if only need to provide a visual difference.
Hint: Speak your content out loud.

Better links for everyone
Read what?
Watch what?
What video is this?

Better links for everyone
<a>Read more<span class=“accessiblyhidden”> about better links</a>
.accessiblyhidden {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}

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/

alt=“contracts and grants icon”
Better: alt=“”

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

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

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

Most of your accessibility issues are content related

Write to express, not impress
No 508 or WCAG criteria to meet,
be understandable.
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.
https://readability-score.com/

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

Accessibility is easy with progressive
enhancement

Contrast – without images (done wrong)
Complies with: 508; 3.3/ WCAG; na

Contrast – without images (done right)
Complies with: 508; 3.3/ WCAG; na

Accessible enhancements
with JavaScript without JavaScript

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.

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

The real cost of
accessibility

“”
“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

$6 Million*
vs NATIONAL FEDERATION OF THE BLIND (NFB)
2008
*almost $13 million including legal fee

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

Accessibility can lead
to innovation

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.

Retractable
stairs

Direction on
Google maps are a
result of building
for accessibility.

Patricia Moore – empathy research
https://www.romankrznaric.com/outrospection/2009/11/01/117

https://www.oxo.com/our-roots

“”
Design is suppose to empower people,
it’s not suppose to disable people.
Patricia Moore
Industrial designer – accessibility pioneer

Thank you
Mike Donahue
UX Architect, Citrix
@mdonahue37

• http://webaim.org
• http://wave.webaim.org/
• http://webaim.org/standards/wcag/checklist
• http://www.hhs.gov/web/section-508/making-files-
accessible/checklist/html/index.html
• http://contrastchecker.com/
• http://www.color-blindness.com/coblis-color-
blindness-simulator/
• https://readability-score.com/
• https://youtu.be/0EQOZRIA-nA
• Wave plugin for Chrome
Resources

Design with accessibility in mind

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (10)

Similaire à Design with accessibility in mind

Similaire à Design with accessibility in mind (20)

Plus de Mike Donahue

Plus de Mike Donahue (7)

Dernier

Dernier (20)

Design with accessibility in mind