Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Mike Ryan - @ryaninteractive
PANIC!
DON’T
How to perform an accessibility evaluation
with limited resources
#ProjectA11yco...
Agenda
2
★ Intro
★ Accessibility and WCAG
★ Why should we design for accessibility?
★ Running an accessibility audit
★ Nex...
Shane Demonstrates VoiceOver
https://www.youtube.com/watch?v=W7lvQkT1U18
Accessibility DefinedU✶ni✶corn
noun | /ˈyü-nə-ˌkȯrn/
1. A magical and imaginary horse-type creature with a single horn
pr...
5
Accessibility Defined
LEVELED UP!!
Al✶i✶corn or (A11ycorn*)
noun | /ˈa-lə-ˌkȯrn/
1. An ultra-rare and super-magical uni...
• Accessibility standards
• Range of disabilities
• Assistive technologies
• Devices and platforms
• Legal issues
#A11ycor...
• All CTA buttons pass WCAG AA for contrast.
• The main hyperlink color passes WCAG AA for contrast.
• Most text styles pa...
• Full WCAG (Web Content Accessibility Guidelines) compliance
is rarely achieved.
• Companies are not getting sued for non...
Agenda
9
★ Intro
★ Accessibility and WCAG
★ Why should we design for accessibility?
★ Project A11ycorn:
Running an accessi...
10
Accessibility Defined
Accessibility
“The usability of a product, service,
environment or facility by people with
the wi...
Assistive Technologies and Strategies
https://www.interaction-design.org/ux-daily/98/why-your-user-experience-must-include...
• Web Content Accessibility Guidelines (WCAG 2.0)
Standards for web content accessibility developed by the
World Wide Web ...
1. Perceivable
• 1.1 Provide text alternatives for any non-text content so that it can be changed into other forms people ...
Agenda
14
★ Intro
★ Accessibility and WCAG
★ Why should we design for accessibility?
★ Project A11ycorn:
Running an access...
15
Accessibility Defined
• You are legally bound by Americans with Disabilities Act
National Federation for the Blind vs. Target, $6 million (2008)...
17
Accessibility Defined
“...most of the cases I’m personally aware of involve a series
of silly missteps and failures to ...
18
Accessibility Defined
“You may be aware that 20% of your customers –
people with disabilities – could be clicking away
...
19
Accessibility Defined
Percentage of Persons with Disability (in the United States)
Age 15-60 - 15%
Age 60+ - 38%
United...
20
Accessibility Defined
“By 2030, it is estimated that nearly 1 in 5 Americans,
approximately 75 million people, will be ...
21
Accessibility Defined
Accessibility Drives Innovation
“When we work on making our devices accessible by
the blind, I do...
Accessibility Benefits for All Users
• Large, crisp, readable text is easy for
everyone to read
• People read video captio...
Agenda
23
★ Intro
★ Accessibility and WCAG
★ Why should we design for accessibility?
★ Project A11ycorn:
Running an access...
Project A11ycorn
1. Plan the scope
–Accessibility Audit Plan
2. Define your evaluations
–Evaluation Matrix
3. Track your f...
• What product are you evaluating and why?
• How much time do you have?
• Consider:
–Disabilities you are supporting
–Acce...
Case Study: MBTA.com
http://www.mbta.com/
• What product are you evaluating and why?
My boss has assigned me to look at our website’s
accessibility so we won’t get ...
Devices
Smartphone
• Android Samsung Galaxy 5
• iPhone 6
Laptop
• Windows 7 PC
Devices and Platforms Example
OSs
• iOS (v9...
Assistive
Technologies
Magnification
• Zoom (iOS)
• Magnification (Android)
• Chrome Zoom (Windows)
Screen Readers
• Voice...
Pick around 20 screens to evaluate. Get a mix of the pages with the highest traffic
and ones that represent the most commo...
• Scope
–Devices
–OSs
–Browsers
–Assistive Technologies
–Pages
• Tools and Methods
• Instructions for Tools
Accessibility ...
Project A11ycorn
1. Plan the scope
–Accessibility Audit Plan
2. Define your evaluations
–Evaluation Matrix
3. Track your f...
Make the most of evaluations
• Eval ID
• Evaluator
• Assistive Tech.
• Tool
• Device
• Form Factor
• OS
• Browser
• Disabi...
Project A11ycorn
1. Plan the scope
–Accessibility Audit Plan
2. Define your evaluations
–Evaluation Matrix
3. Track your f...
WebAIM Wave Toolbar
WebAIM Wave Toolbar
Image Missing Alt Text
WCAG Quick Reference
https://www.w3.org/WAI/WCAG20/quickref/
Low Color Contrast
Members of your team can record findings in real time
• Instructions
• Evaluation Status Log
• Tables for Findings
–Global...
Project A11ycorn
1. Plan the scope
–Accessibility Audit Plan
2. Define your evaluations
–Evaluation Matrix
3. Track your f...
Description: T Planner button uses image text
and has no alt text.
Impact: Without alt text, screen readers
wouldn’t trans...
Description: Low contrast between
blue text and background color.
Impact: Failing to meet the minimum contrast
ratio will ...
Agenda
44
★ Intro
★ Accessibility and WCAG
★ Why should we design for accessibility?
★ Project A11ycorn:
Running an access...
• Perform user research with users who have disabilities to fill
in the gaps
• Follow up on fixes
• Partner with developme...
Project A11ycorn
1. Plan the scope
–Accessibility Audit Plan
2. Define your evaluations
–Evaluation Matrix
3. Track your f...
47
Accessibility Defined
Now fly my A11ycorns... Fly!
Thank You #ProjectA11ycorn
http://fyeah-wizard-of-oz.tumblr.com/page...
Prochain SlideShare
Chargement dans…5
×

Don't Panic! How to perform an accessibility evaluation with limited resources

1 161 vues

Publié le

Being tasked with an accessibility evaluation is can be daunting. How can you measure accessibility? What disabilities are the most important? What tools do you need? How long will it take? Where do I start? What does "accessible" even mean?

These are all questions I asked myself last year when I performed my first accessibility eval. This session will share everything I learned since then in performing three accessibility evaluations.

Publié dans : Design
  • Soyez le premier à commenter

Don't Panic! How to perform an accessibility evaluation with limited resources

  1. 1. Mike Ryan - @ryaninteractive PANIC! DON’T How to perform an accessibility evaluation with limited resources #ProjectA11ycorn
  2. 2. Agenda 2 ★ Intro ★ Accessibility and WCAG ★ Why should we design for accessibility? ★ Running an accessibility audit ★ Next steps
  3. 3. Shane Demonstrates VoiceOver https://www.youtube.com/watch?v=W7lvQkT1U18
  4. 4. Accessibility DefinedU✶ni✶corn noun | /ˈyü-nə-ˌkȯ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. 5. 5 Accessibility Defined LEVELED UP!! Al✶i✶corn or (A11ycorn*) noun | /ˈa-lə-ˌkȯ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”)
  6. 6. • 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)
  7. 7. • 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 PANICDON’T PANIC
  8. 8. • 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
  9. 9. Agenda 9 ★ Intro ★ Accessibility and WCAG ★ Why should we design for accessibility? ★ Project A11ycorn: Running an accessibility audit ★ Next steps
  10. 10. 10 Accessibility Defined Accessibility “The usability of a product, service, environment or facility by people with the widest range of capabilities.” ISO 9241-171
  11. 11. Assistive Technologies and Strategies https://www.interaction-design.org/ux-daily/98/why-your-user-experience-must-include-design-for-accessibility http://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
  12. 12. • 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/
  13. 13. 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/
  14. 14. Agenda 14 ★ Intro ★ Accessibility and WCAG ★ Why should we design for accessibility? ★ Project A11ycorn: Running an accessibility audit ★ Next steps
  15. 15. 15 Accessibility Defined
  16. 16. • 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. 17. 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. 18. 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. 19. 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. 20. 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. 21. 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
  22. 22. 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
  23. 23. Agenda 23 ★ Intro ★ Accessibility and WCAG ★ Why should we design for accessibility? ★ Project A11ycorn: Running an accessibility audit ★ Next steps
  24. 24. 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.
  25. 25. • 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
  26. 26. Case Study: MBTA.com http://www.mbta.com/
  27. 27. • 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
  28. 28. Devices Smartphone • Android Samsung Galaxy 5 • iPhone 6 Laptop • Windows 7 PC Devices and Platforms Example OSs • 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
  29. 29. Assistive Technologies Magnification • Zoom (iOS) • Magnification (Android) • Chrome Zoom (Windows) Screen Readers • VoiceOver with Rotor (iOS) • TalkBack (Android) • NVDA (Windows) Scope - Tools for Evaluations Automated 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
  30. 30. 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
  31. 31. • Scope –Devices –OSs –Browsers –Assistive Technologies –Pages • Tools and Methods • Instructions for Tools Accessibility Audit Plan: Google Doc Accessibility Audit Plan
  32. 32. 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.
  33. 33. Make the most of evaluations • Eval ID • Evaluator • Assistive Tech. • Tool • Device • Form Factor • OS • Browser • Disability Evaluation Matrix: Google Sheet Evaluation Matrix
  34. 34. 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.
  35. 35. WebAIM Wave Toolbar
  36. 36. WebAIM Wave Toolbar
  37. 37. Image Missing Alt Text
  38. 38. WCAG Quick Reference https://www.w3.org/WAI/WCAG20/quickref/
  39. 39. Low Color Contrast
  40. 40. 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
  41. 41. 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.
  42. 42. 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 Users Blind ● Low Vision WCAG Standards Failed 1.1.1 A Pages Affected Home
  43. 43. 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 Users Low Vision WCAG Standards Failed 1.4.3 AA Pages Affected Home
  44. 44. Agenda 44 ★ Intro ★ Accessibility and WCAG ★ Why should we design for accessibility? ★ Project A11ycorn: Running an accessibility audit ★ Next steps
  45. 45. • 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
  46. 46. 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. 47. 47 Accessibility Defined Now fly my A11ycorns... Fly! Thank You #ProjectA11ycorn http://fyeah-wizard-of-oz.tumblr.com/page/4

×