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.

1. Mike Ryan - @ryaninteractive
PANIC!
DON’T
How to perform an accessibility evaluation
with limited resources
#ProjectA11ycorn

2. Agenda
2
★ Intro
★ Accessibility and WCAG
★ Why should we design for accessibility?
★ Running an accessibility audit
★ Next steps

3. Shane Demonstrates VoiceOver
https://www.youtube.com/watch?v=W7lvQkT1U18

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
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. • 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. • 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. • 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. Agenda
9
★ Intro
★ Accessibility and WCAG
★ Why should we design for accessibility?
★ Project A11ycorn:
Running an accessibility audit
★ Next steps

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. 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. • 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. 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. Agenda
14
★ Intro
★ Accessibility and WCAG
★ Why should we design for accessibility?
★ Project A11ycorn:
Running an accessibility audit
★ Next steps

15. 15
Accessibility Defined

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
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
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
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
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
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. 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. Agenda
23
★ Intro
★ Accessibility and WCAG
★ Why should we design for accessibility?
★ Project A11ycorn:
Running an accessibility audit
★ Next steps

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. • 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. Case Study: MBTA.com
http://www.mbta.com/

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. 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. 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. 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. • Scope
–Devices
–OSs
–Browsers
–Assistive Technologies
–Pages
• Tools and Methods
• Instructions for Tools
Accessibility Audit Plan: Google Doc
Accessibility Audit Plan

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. Make the most of evaluations
• Eval ID
• Evaluator
• Assistive Tech.
• Tool
• Device
• Form Factor
• OS
• Browser
• Disability
Evaluation Matrix: Google Sheet
Evaluation Matrix

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. WebAIM Wave Toolbar

36. WebAIM Wave Toolbar

37. Image Missing Alt Text

38. WCAG Quick Reference
https://www.w3.org/WAI/WCAG20/quickref/

39. Low Color Contrast

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. 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. 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. 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. Agenda
44
★ Intro
★ Accessibility and WCAG
★ Why should we design for accessibility?
★ Project A11ycorn:
Running an accessibility audit
★ Next steps

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. 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
Accessibility Defined
Now fly my A11ycorns... Fly!
Thank You #ProjectA11ycorn
http://fyeah-wizard-of-oz.tumblr.com/page/4