Designing and Testing for Digital Accessibility

Digital Accessibility 

Linnea Vizard Adie Margineanu

Why focus on digital accessibility?

•  Accessibility helps everyone

•  Accessibility has huge financial benefits

•  Accessibility is the law

Outline

Understanding disability and accessible design

Benefits of accessible design

Web Content Accessibility Guidelines (WCAG)

Applying WCAG

Testing accessibility

Q&A

4

Disability is

a mismatch between the needs of the individual and the design of the product, system, or service

experienced by anyone excluded from the design

- Inclusive Design Research Centre, OCAD

https://www.youtube.com/watch?v=x31u1seLTo0&feature=youtu.be

Digital experiences might be excluding or creating barriers for people with the following types of impairments:

6

Visual impairments Auditory impairments

Mobility impairments Cognitive impairments

Assistive Technology and Tools

7

•  Screen readers (JAWS, NVDA, VoiceOver, TalkBack)

Image credit: http://westernblind.blogspot.ca/2011/06/cat-skills-zoomtext.html

•  Screen magnification (ZoomText, through the browser)

•  Speech recognition (Dragon NaturallySpeaking)

•  Eye-tracking, sip and puff control, dynamic braille display, alternative keyboard, oversized trackball mouse, etc.

8

Accessibility is

the degree to which a system or service is available to as many people as possible

the “ability to access” a system

Accessible design approaches

10

Universal design is

a one size fits all approach

originated in architecture and industrial design

- Inclusive Design Research Centre, OCAD

12

Inclusive design is

a one size fits one approach

suitable for digital systems because of the freedom to create a flexible design that can adapt, morph, or stretch to address a wider range of needs

- Inclusive Design Research Centre, OCAD

Accessibility helps everyone.

Accessibility is for everyone

Curb cuts Image from: https://asyourworldchanges.wordpress.com/2008/10/06/using-the-curb-cuts-principle-to-reboot-computing/

•  Curb cuts

•  Closed captioning

•  Automatic doors

•  Accessible washrooms

Accessibility is for everyone

Closed captioning https://en.wikipedia.org/wiki/Subtitle_(captioning)

•  Curb cuts

•  Closed captioning

•  Automatic doors

•  Accessible washrooms

Accessibility is for everyone

Sliding entry doors http://www.archiexpo.com/prod/kaba-saflok/product-59355-1226003.html

Accessibility has financial benefits.

15.5% $25B $100K of the gen pop lives with a disability.

combined spending power across Canada.

daily financial penalties of legislative non-compliance.

Financial Benefits

Accessibility is the law.

United States

21

•  Americans with Disabilities Act (ADA)

•  Section 508

Canada

•  Federal Accessibility Legislation

•  Ontario: Accessibility for Ontarians with Disabilities Act (AODA)

•  Province-specific: Manitoba, Nova Scotia, Saskatchewan, BC, Newfoundland

Web Content Accessibility Guidelines 2.0

Web Content Accessibility Guidelines (WCAG, “wuh-cag”) are a set of standards developed by the World Wide Web Consortium to ensure websites and digital experiences are accessible.

23

•  Most digital accessibility legislation, including AODA adheres to WCAG 2.0

•  WCAG 2.0 Level A and AA.

Web Content Accessibility Principles

24

Perceivable “Provide text alternative 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.”

Operable “Make all functionality available from a keyboard.”

Understandable “Make text content readable and understandable.”

Robust “Maximize compatibility with current and future user agents, including assistive technologies.”

-WCAG 2.0 Guidelines https://www.w3.org/WAI/WCAG20/quickref/#qr-text-equiv-all

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: Time-based media: 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.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.

2. Operable

3. Understandable

4. Robust

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.1: Maximize compatibility with current and future user agents, including assistive technologies.

Level AAA “Provide sign language translations for videos.”

Level A “Provide text alternatives for non-text content.”

Level AA “Users have access to audio description for video content.”

Visuals

•  Provide alternative text

Visuals

•  Use adequate color contrast

Visuals •  Use logical/hierarchical organization and descriptive,

succinct page titles

Language •  Use clear sentences •  Provide definitions for unfamiliar concepts

Compatibility •  Website accessibility should account for different assistive

devices and tools used •  Content should be compatible with older browsers and legacy

versions of tools or software •  Websites should be fully navigable by keyboard

Compatibility •  Website accessibility should account for different assistive

devices and tools used •  Content should be compatible with older browsers and legacy

versions of tools or software •  Websites should be fully navigable by keyboard

Making sure the product is accessible

34

•  Need to make sure what we design and build works for people with impairments and people using assistive technology

•  The way we do that is through testing:

- automated testing

- manual testing

- testing with users

Testing with users

•  Usability vs accessibility testing?

•  Remote vs in person

•  Recruiting

•  Technology versioning

Personal set up

•  Set up is calibrated in specific ways

36

Image credit: http://www.cccblog.org/2014/05/16/visions2025-interactions/

•  Recording can be a challenge •  Important to note the specifics of

the user’s set ups and settings

•  Speed of the screen reader

What does a screen reader sound like?

37

iOS VoiceOver at about 500 words per minute

Advanced screen reader user’s can get up to 900-1200 words per minute

Auditing digital products for accessibility

•  Colour contrast and visual design check

•  Keyboard check

•  Screen reader check

•  Manual and automated code check

http://webaim.org/resources/contrastchecker/

Colour Contrast Checker

•  Enter the background and foreground colours

•  See if contrast passes or fails desired preference

•  Tip: lighten or darken colours within the interface

•  Colour contrast ratio for level AA should be at least 4.5:1 for normal text and 3:1 for large text

39

Colour Contrast Analyser app http://www.paciellogroup.com/resources/contrastanalyser/

Sim Daltonism

•  Colour blindness simulator app for Mac OS X

40

Available on the App Store (free)https://michelf.ca/projects/sim-daltonism/

Photoshop tools

•  View > Proof Setup > Colour Blindness

41

Integrated colour blindness checkers

Greyscale

•  View your design in greyscale

42

Keyboard check

Screen reader check

https://addons.mozilla.org/en-us/firefox/addon/fangs-screen-reader-emulator/

Fangs Screen Reader Emulator

•  Free for Firefox browser

•  Screen reader output, list of headings, list of links

45

https://addons.mozilla.org/en-us/firefox/addon/web-developer/

Web Developer extension

•  Free for Firefox browser

•  Disable images, linearize the page, find duplicate ID’s, display ARIA roles, view heading structure, display image alt tags, etc.

46

HTML CodeSniffer

•  Browser extension •  Cut and paste code

•  Results need appropriate interpretation

•  For example: image alt tags

47

http://squizlabs.github.io/HTML_CodeSniffer/

AODA compliance timelines

48

Jan 2014

Jan 2015

Jan 2016

Jan 2021

New internet + web content compliant with WCAG 2.0 A.

Notify public about availability of accessible formats and communications.

Provide accessible formats and communication support.

All internet and web content compliant with WCAG 2.0 AA.

Resources

Legislation in United States and Canada

http://www.usabilitymatters.com/2015/wp-content/uploads/2016/01/BMO_resources_v2.pdf

Infographic: Why is accessibility important?

http://www.usabilitymatters.com/why-is-accessibility-important/

Usability Matters 215 Spadina Ave, Toronto

www.usabilitymatters.com

info@usabilitymatters.com

Thank you

facebook.com/UsabilityMattersInc

@umatters

linkedin.com/company/usability-matters

Linnea Vizard 416 598 7770 ex 19

linnea@usabilitymatters.com

Adie Margineanu

416 598 7770 ex 25

adie@usabilitymatters.com