Mike Ryan - @ryaninteractive
PANIC!DON’T
How to perform an accessibility evaluation with limited resources
#ProjectA11ycorn
Agenda
2
★ Intro
★ Accessibility and WCAG
★ Why should we design for accessibility?
★ Running an accessibility audit
★ Next steps
Shane Demonstrates VoiceOver
https://www.youtube.com/watch?v=W7lvQkT1U18
Accessibility DefinedU✶ni✶cornnoun | /ˈyü-nə-ˌko ̇rn/
1. A magical and imaginary horse-type creature with a single horn protruding from their forehead.
2. A magical and imaginary human-type UX professional who has skills including (but not limited) to:
visual design, interaction design, information architecture, front-end development, video editing, origami, flowcharting, user research, all-the-coding, prototyping, persuasion, psychoanalysis, whiteboarding, empathizing, group facilitation, hostage negotiation, IT support, writing, editing, contenting, project management, death marching, strategery, analytics, quality assurance, pig-lipsticking & statistics
5
Accessibility Defined
LEVELED UP!!
Al✶i✶corn or (A11ycorn*)
noun | /ˈa-lə-ˌko ̇rn/
1. An ultra-rare and super-magical unicorn with wings. (They can fly.)
2. A ultra-rare and super-magical user experience professional with all the required skills, plus accessibility.
*a11y = accessibility (sometimes pronounced “ally”)
• Accessibility standards
• Range of disabilities
• Assistive technologies
• Devices and platforms
• Legal issues
#A11ycornProblems
“How do we make this accessible?”(so we don’t get sued)
• All CTA buttons pass WCAG AA for contrast.
• The main hyperlink color passes WCAG AA for contrast.
• Most text styles pass WCAG AA for contrast.
• LM.com now functions for TalkBack, the Android screen reader.
• Video controls now function on screen readers.
RWD Accessibility Improvements
http://i2.wp.com/www.kittyarmy.com/wp-content/uploads/2013/07/4553277701_32fefab169_z.jpg
DON’T PANIC DON’T PANIC
• Full WCAG (Web Content Accessibility Guidelines) compliance is rarely achieved.
• Companies are not getting sued for non compliance with WCAG. People sue when they can’t complete core tasks.
• What matters is: - Observable effort- Responding to customer complaints
• There are many free tools to help you
A11ycorns are generous and helpful!
Some (Hopefully) Comforting Facts
Agenda
9
★ Intro
★ Accessibility and WCAG
★ Why should we design for accessibility?
★ Project A11ycorn: Running an accessibility audit
★ Next steps
10
Accessibility Defined
Accessibility“The usability of a product, service,
environment or facility by people with the widest range of capabilities.”
ISO 9241-171
Assistive Technologies and Strategies
https://www.interaction-design.org/ux-daily/98/why-your-user-experience-must-include-design-for-accessibilityhttp://www.expandability.org/assistive-technology/
• Low Vision - screen magnifiers, enlarge text, increase contrast
• Blind - screen readers, Braille displays, speech input
• Motor - keyboard only, alternate input devices (trackballs, pointing devices, voice, eye-gaze systems)
• Deaf / Hard of Hearing - captioning
• Cognitive - plain language, translation engines, word prediction, memory aids
• Web Content Accessibility Guidelines (WCAG 2.0)Standards for web content accessibility developed by the World Wide Web Consortium (W3C)
• Level A (minimum)• Level AA (standard) • Level AAA (strictest)
• Section 508 Standards for tech used by government employees
WCAG Accessibility Guidelines
https://www.w3.org/WAI/WCAG20/quickref/
1. Perceivable• 1.1 Provide text alternatives for any non-text content so that it can be changed into other forms people need,
such as large print, braille, speech, symbols or simpler language.• 1.2 Provide alternatives for time-based media.• 1.3 Create content that can be presented in different ways (for example simpler layout) without losing
information or structure.• 1.4 Make it easier for users to see and hear content including separating foreground from background.
2. Operable• 2.1 Make all functionality available from a keyboard.• 2.2 Provide users enough time to read and use content.• 2.3 Do not design content in a way that is known to cause seizures.• 2.4 Provide ways to help users navigate, find content, and determine where they are.
3. Understandable• 3.1 Make text content readable and understandable.• 3.2 Make Web pages appear and operate in predictable ways.• 3.3 Help users avoid and correct mistakes.
4. Robust• 4.1 Maximize compatibility with current and future user agents, including assistive technologies.
12 Accessibility Guidelines for WCAG
https://www.w3.org/WAI/WCAG20/quickref/
Agenda
14
★ Intro
★ Accessibility and WCAG
★ Why should we design for accessibility?
★ Project A11ycorn: Running an accessibility audit
★ Next steps
• You are legally bound by Americans with Disabilities Act National Federation for the Blind vs. Target, $6 million (2008)
• Accessible technology has opened up the world for people with disabilities
• Many users have disabilities and the number is growing “We’re all just temporarily abled.” Cindy Li
• Improves code efficiency, performance and scalability Coding for accessibility results in faster load times, fewer bugs improved SEO and support for more devices.
• Designing for accessibility benefits all users ...sometimes in unexpected ways
Why Should We Design For Accessibility?
17
Accessibility Defined“...most of the cases I’m personally aware of involve a series
of silly missteps and failures to take the situation seriously. ...lawyers in this type of action do their homework first and have
gathered hard evidence that disabled users’ needs have gone unmet and their complaints to the defendant
have not gotten results.
In other words, your website didn’t get you sued, your inaction did.”
Karl Groves
18
Accessibility Defined
“You may be aware that 20% of your customers – people with disabilities – could be clicking away from your websites or mobile apps every day,
not having bought anything or found the information they wished to find.”
Jonathan Hassell
How Many Users Have Disabilities?
19
Accessibility Defined
Percentage of Persons with Disability (in the United States)
Age 15-60 - 15% Age 60+ - 38%
United Nations Statistics Division
How Many Users Have Disabilities?
20
Accessibility Defined
“By 2030, it is estimated that nearly 1 in 5 Americans, approximately 75 million people, will be over 65.
The number of older adults with sight loss is expected to double.”
Massachusetts Association for the Blind & Visually Impaired
How Many Users Have Disabilities?
21
Accessibility Defined
Accessibility Drives Innovation“When we work on making our devices accessible by
the blind, I don’t consider the bloody ROI… Apple makes a lot of money... it has created a customer
ecosystem that, as a whole, delights customers and makes them want to stay as an Apple customer.”
Tim Cook
http://www.bbc.com/news/business-29829763
Accessibility Benefits for All Users
• Large, crisp, readable text is easy for everyone to read
• People read video captions when audio is unavailable
• Good labeling ease cognitive load
Agenda
23
★ Intro
★ Accessibility and WCAG
★ Why should we design for accessibility?
★ Project A11ycorn: Running an accessibility audit
★ Next steps
Project A11ycorn
1. Plan the scope – Accessibility Audit Plan
2. Define your evaluations– Evaluation Matrix
3. Track your findings collaboratively
– Collect Findings
4. Report findings to stakeholders– Findings Report
Links point to Google documents you can use. After you click the link it will create a copy for you to name.
• What product are you evaluating and why?
• How much time do you have?
• Consider:
– Disabilities you are supporting– Accessibility standards– Device types – Operating systems– Browsers
Define Your Goals and Scope
• What product are you evaluating and why? My boss has assigned me to look at our website’s accessibility so we won’t get sued.
• How much time do you have? 3 weeks
• Consider:
– Disabilities you are supporting: All the major ones– Accessibility standards: WCAG 2.0 AA– Device types: Smartphone and Laptop – Operating systems: iOS, Android, Windows – Browsers: Chrome, Safari, Internet Explorer
Define Your Goals and Scope
DevicesSmartphone
• Android Samsung Galaxy 5• iPhone 6
Laptop• Windows 7 PC
Devices and Platforms ExampleOSs
• iOS (v9)• Android (v5)• Windows (v10)
Browsers• Chrome (v47)• Safari (v9)• Internet Explorer (v11)
Disabilities • Low vision • Blind • Motor • Deaf/hard of hearing
Assistive Technologies• Screen magnification• Enlarge text• Increase contrast• Screen readers• Speech input• Custom input devices• Captioning
Assistive TechnologiesMagnification
• Zoom (iOS)• Magnification (Android)• Chrome Zoom (Windows)
Screen Readers• VoiceOver with Rotor (iOS)• TalkBack (Android)• NVDA (Windows)
Scope - Tools for EvaluationsAutomated Tools
• WebAIM Wave Toolbar• WCAG Contrast Checker• Tenon • W3C Validator Tool
Manual Methods• Increase text size • Keyboard only • Eyeballing• Video caption check• Manual contrast check• WebAIM Color Contrast
Checker
Pick around 20 screens to evaluate. Get a mix of the pages with the highest traffic and ones that represent the most common layouts.
Scope - Screens to Evaluate
http://www.mbta.com/http://www.mbta.com/schedules_and_maps/
http://www.mbta.com/schedules_and_maps/subway/ http://www.mbta.com/schedules_and_maps/rail/
http://www.mbta.com/schedules_and_maps/rail/lines/?route=KINGSTON
• Scope
– Devices
– OSs
– Browsers
– Assistive Technologies
– Pages
• Tools and Methods
• Instructions for Tools
Accessibility Audit Plan: Google Doc
Accessibility Audit Plan
Project A11ycorn
1. Plan the scope – Accessibility Audit Plan
2. Define your evaluations– Evaluation Matrix
3. Track your findings collaboratively
– Collect Findings
4. Report findings to stakeholders– Findings Report
Links point to Google documents you can use. After you click the link it will create a copy for you to name.
Make the most of evaluations
• Eval ID
• Evaluator
• Assistive Tech.
• Tool
• Device
• Form Factor
• OS
• Browser
• Disability
Evaluation Matrix: Google Sheet
Evaluation Matrix
Project A11ycorn
1. Plan the scope – Accessibility Audit Plan
2. Define your evaluations– Evaluation Matrix
3. Track your findings collaboratively
– Collect Findings
4. Report findings to stakeholders– Findings Report
Links point to Google documents you can use. After you click the link it will create a copy for you to name.
WCAG Quick Reference
https://www.w3.org/WAI/WCAG20/quickref/
Members of your team can record findings in real time
• Instructions
• Evaluation Status Log
• Tables for Findings
– Global
– Sectional
– Individual Page
Collect Findings: Google Doc
Collect Findings
Project A11ycorn
1. Plan the scope – Accessibility Audit Plan
2. Define your evaluations– Evaluation Matrix
3. Track your findings collaboratively
– Collect Findings
4. Report findings to stakeholders– Findings Report
Links point to Google documents you can use. After you click the link it will create a copy for you to name.
Description: T Planner button uses image text and has no alt text.
Impact: Without alt text, screen readers wouldn’t translate the text on this button and users would not know what it does. Some screen readers won’t identify the button at all.
S1 - Button is Not Labelled
Best Practices: When navigating to a button, descriptive text must be presented to screen reader users to indicate the function of the button.
Most Affected UsersBlind ● Low Vision
WCAG Standards Failed1.1.1 A
Pages AffectedHome
Description: Low contrast between blue text and background color.
Impact: Failing to meet the minimum contrast ratio will cause the text to not be readable by users with low vision and/or color deficiencies. It also makes reading difficult for users with declining vision.
S2 - Very Low Color Contrast
Best Practices: On non-bold text that is less than 18 point, the visual presentation of text and images of text should have a contrast ratio of at least 4.5:1.
Most Affected UsersLow Vision
WCAG Standards Failed1.4.3 AA
Pages AffectedHome
Agenda
44
★ Intro
★ Accessibility and WCAG
★ Why should we design for accessibility?
★ Project A11ycorn: Running an accessibility audit
★ Next steps
• Perform user research with users who have disabilities to fill in the gaps
• Follow up on fixes
• Partner with development and QA to implement accessible code practices and testing
• Incorporate accessibility into your everyday UX practice
- Include accessibility when recruiting for general research
- Work with your designer colleagues
- Be an accessibility cop
Next Steps
Project A11ycorn
1. Plan the scope – Accessibility Audit Plan
2. Define your evaluations– Evaluation Matrix
3. Track your findings collaboratively
– Collect Findings
4. Report findings to stakeholders– Findings Report
Links point to Google documents you can use. After you click the link it will create a copy for you to name.
47
Accessibility Defined
Now fly my A11ycorns... Fly!Thank You #ProjectA11ycorn
http://fyeah-wizard-of-oz.tumblr.com/page/4
Top Related