Designing and Testing for Digital Accessibility
-
Upload
usability-matters -
Category
Design
-
view
468 -
download
2
Transcript of 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
Thank you
facebook.com/UsabilityMattersInc
@umatters
linkedin.com/company/usability-matters
Linnea Vizard 416 598 7770 ex 19
Adie Margineanu
416 598 7770 ex 25