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

15

Accessibility Defined

• 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

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

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

– 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