designing for accessibility (soflux)
TRANSCRIPT
![Page 1: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/1.jpg)
Designing for AccessibilityFeb 2016
Mike DonahueUX Architect, Citrix
@mdonahue37
![Page 2: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/2.jpg)
“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
![Page 3: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/3.jpg)
What does it mean to be accessible?
![Page 4: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/4.jpg)
© 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
![Page 5: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/5.jpg)
© 2016 Mike Donahue
“I (we) don’t build websites for blind people.”Disabilities are not absolute or permanent conditions.
![Page 6: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/6.jpg)
© 2016 Mike Donahue
![Page 7: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/7.jpg)
© 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
![Page 8: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/8.jpg)
© 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
![Page 9: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/9.jpg)
© 2016 Mike Donahue
Not all disabilities are human limitations.
![Page 10: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/10.jpg)
© 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.
![Page 11: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/11.jpg)
© 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)
![Page 12: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/12.jpg)
© 2016 Mike Donahue
Accessibility is about overcoming all limitations.
![Page 13: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/13.jpg)
How do we assess accessibility?
![Page 14: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/14.jpg)
© 2016 Mike Donahue
WCAG 2.0 level AAMeets or exceeds 508 Compliance
Minimum Accessibility Requirements
![Page 15: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/15.jpg)
© 2015 Citrix | Confidential
http://webaim.org/standards/wcag/checklisthttp://www.hhs.gov/web/section-508/making-files-accessible/checklist/html/index.html#
Checklists
![Page 16: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/16.jpg)
© 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?
![Page 17: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/17.jpg)
© 2016 Mike Donahue
There’s technical accessibility and thenthere’s functional accessibility.
Function always trumps technical
![Page 18: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/18.jpg)
What does accessibility look like?
![Page 19: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/19.jpg)
© 2016 Mike Donahue
Most of your accessibility issues are content related
![Page 20: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/20.jpg)
© 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/
![Page 21: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/21.jpg)
© 2016 Mike Donahue
Write to express, not impressNo 508 or WCAG criteria to meet, be understandable.
Hemingway App
https://readability-score.com/
![Page 22: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/22.jpg)
© 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>
![Page 23: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/23.jpg)
© 2015 Citrix | Confidential
<h1>
<h2>
<h2>
<h2>
<h3>
<h3>
<p>
<h2>
<h2>
![Page 24: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/24.jpg)
© 2015 Citrix | Confidential
Headings in Mac/iOS VoiceOver WebRotor
![Page 25: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/25.jpg)
© 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.
![Page 26: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/26.jpg)
© 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.
![Page 27: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/27.jpg)
© 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
![Page 28: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/28.jpg)
© 2015 Citrix | Confidential
alt=“contracts and grants icon”
Better: alt=“”
![Page 29: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/29.jpg)
© 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.”
![Page 30: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/30.jpg)
© 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
![Page 31: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/31.jpg)
© 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
![Page 32: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/32.jpg)
© 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
![Page 33: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/33.jpg)
© 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.
![Page 34: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/34.jpg)
© 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
![Page 35: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/35.jpg)
© 2016 Mike Donahue
Contrast – without imagesComplies with: 508; 3.3/ WCAG; na
![Page 36: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/36.jpg)
© 2016 Mike Donahue
Contrast – without imagesComplies with: 508; 3.3/ WCAG; na
![Page 37: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/37.jpg)
© 2016 Mike Donahue
ContrastSubtly helps no one.
![Page 38: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/38.jpg)
© 2016 Mike Donahue
Color blindnessComplies with: 508; 3.1, 3.5, 4.1 / WCAG; 1.4.1
Normal vision
Protanopia Deuteranopia
![Page 39: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/39.jpg)
Progressive enhancement is the cousin of accessibility?
![Page 40: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/40.jpg)
© 2016 Mike Donahue
Accessible enhancements
with JavaScript without JavaScript
![Page 41: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/41.jpg)
© 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.
![Page 42: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/42.jpg)
© 2016 Mike Donahue
“”Jared Smith, WebAIM
“If the content is critical, assume the enhancement will fail.
If it’s not, assume it will work.”
![Page 43: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/43.jpg)
© 2016 Mike Donahue
Accessible enhancements
with JavaScript without JavaScript
![Page 44: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/44.jpg)
Who’s responsible for accessibility?
![Page 45: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/45.jpg)
© 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
![Page 46: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/46.jpg)
The cost of accessibility
![Page 47: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/47.jpg)
© 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
![Page 48: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/48.jpg)
© 2016 Mike Donahue
$6 Million*vs NATIONAL FEDERATION OF THE BLIND (NFB)
2008
*almost $13 million including legal fee
![Page 49: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/49.jpg)
© 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
![Page 50: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/50.jpg)
© 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.
![Page 51: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/51.jpg)
Accessibility leads to innovation
![Page 52: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/52.jpg)
© 2015 Citrix | Confidential
Retractable stairs
![Page 53: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/53.jpg)
© 2015 Citrix | Confidential
https://www.oxo.com/our-roots
![Page 54: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/54.jpg)
© 2015 Citrix | Confidential
Direction on Google maps are a result of building for accessibility.
![Page 55: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/55.jpg)
© 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
![Page 56: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/56.jpg)
© 2016 Mike Donahue
Accessibility is about overcoming all limitations.Both human and technical
![Page 57: Designing for Accessibility (SOFLUX)](https://reader036.vdocument.in/reader036/viewer/2022062522/589eceb51a28ab47138b6655/html5/thumbnails/57.jpg)
Thank you
Mike DonahueUX Architect, Citrix
@mdonahue37