design with accessibility in mind

Designing and developing

with Accessibility in MindFeb 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.


60to75percentof peopleneed glassesto read anythingincluding 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

http://www.disabilitycompendium.org/docs/default-source/2014-compendium/annual-report.pdf


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

Where do we start?


WCAG 2.0 level AAMeets 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?

PerceivableCan 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 - linksComplies with: 508; 3.5/ WCAG; 1.4.1

http://contrastchecker.com

http://contrastchecker.com/


Contrast check your brand colorsComplies with: 508; 3.5/ WCAG; 1.4.1


Color blindnessComplies with: 508; 3.1, 3.5, 4.1 / WCAG; 1.4.1

Normal vision

Protanopia

Deuteranopia

OperableCan it be operated by more than one method?

© 2015 Citrix | Confidential

Headings in Mac/iOS

VoiceOver WebRotor


Headings are for structure not styleComplies 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 – sectioningComplies with: 508; 4.2, 15.4, 15.5 / WCAG; 1.3.1, 2.4.10

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.

UnderstandableIs it obvious in its intended use or meaning?


Semantic markup – inlineComplies with: 508; 4.2, 15.4, 15.5 / WCAG; 1.3.1, 2.4.10

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/

Complies with: 508; 3.5/ WCAG; 1.4.1

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

http://www.webteacher.ws/2015/07/15/accessibility-important-infographic/


Most of your accessibility issues are content related


Write to express, not impressNo 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 impressNo 508 or WCAG criteria to meet,

be understandable.

Hemingway App



RobustHow well does it fail?

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


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.


Accessible enhancements



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

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

http://www.hhs.gov/web/section-508/making-files-accessible/checklist/html/index.html

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://youtu.be/0EQOZRIA-nA