designing for accessibility (soflux)

Designing for AccessibilityFeb 2016

Mike DonahueUX Architect, Citrix

@mdonahue37

“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

What does it mean to be accessible?

© 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

© 2016 Mike Donahue

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

© 2016 Mike Donahue

© 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

© 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

© 2016 Mike Donahue

Not all disabilities are human limitations.

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

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

© 2016 Mike Donahue

Accessibility is about overcoming all limitations.

How do we assess accessibility?

© 2016 Mike Donahue

WCAG 2.0 level AAMeets or exceeds 508 Compliance

Minimum Accessibility Requirements

© 2015 Citrix | Confidential

http://webaim.org/standards/wcag/checklisthttp://www.hhs.gov/web/section-508/making-files-accessible/checklist/html/index.html#

Checklists

© 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?

© 2016 Mike Donahue

There’s technical accessibility and thenthere’s functional accessibility.

Function always trumps technical

What does accessibility look like?

© 2016 Mike Donahue

Most of your accessibility issues are content related

© 2016 Mike Donahue

Write to express, not impressNo 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/

© 2016 Mike Donahue

Write to express, not impressNo 508 or WCAG criteria to meet, be understandable.

Hemingway App

https://readability-score.com/

© 2016 Mike Donahue

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 </h4>

<h5>Don’t use headings just for their style</h5>

<h6>Headings provide landmarks for screen readers</h6>

© 2015 Citrix | Confidential

<h1>

<h2>

<h2>

<h2>

<h3>

<h3>

<p>

<h2>

<h2>

© 2015 Citrix | Confidential

Headings in Mac/iOS VoiceOver WebRotor

© 2016 Mike Donahue

Semantic markup – inlineComplies 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.

© 2016 Mike Donahue

Semantic markup – sectioningComplies 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.

© 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

© 2015 Citrix | Confidential

alt=“contracts and grants icon”

Better: alt=“”

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

© 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

© 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

© 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

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

© 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

© 2016 Mike Donahue

Contrast – without imagesComplies with: 508; 3.3/ WCAG; na

© 2016 Mike Donahue

Contrast – without imagesComplies with: 508; 3.3/ WCAG; na

© 2016 Mike Donahue

ContrastSubtly helps no one.

© 2016 Mike Donahue

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

Normal vision

Protanopia Deuteranopia

Progressive enhancement is the cousin of accessibility?

© 2016 Mike Donahue

Accessible enhancements

with JavaScript without JavaScript

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

© 2016 Mike Donahue

“”Jared Smith, WebAIM

“If the content is critical, assume the enhancement will fail.

If it’s not, assume it will work.”

© 2016 Mike Donahue

Accessible enhancements

with JavaScript without JavaScript

Who’s responsible for accessibility?

© 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

The cost of accessibility

© 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 SpringerChief Executive of SSB BART Group

© 2016 Mike Donahue

$6 Million*vs NATIONAL FEDERATION OF THE BLIND (NFB)

2008

*almost $13 million including legal fee

© 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

© 2016 Mike Donahue

Settlement details*2 years to implement

Legal fees$755,000.00Implementation $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.

Accessibility leads to innovation

© 2015 Citrix | Confidential

Retractable stairs

© 2015 Citrix | Confidential

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

© 2015 Citrix | Confidential

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

© 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

© 2016 Mike Donahue

Accessibility is about overcoming all limitations.Both human and technical

Thank you

Mike DonahueUX Architect, Citrix

@mdonahue37