Designing and Testing for Digital Accessibility
-
Upload
usability-matters -
Category
Design
-
view
470 -
download
2
Transcript of Designing and Testing for Digital Accessibility
![Page 1: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/1.jpg)
Digital Accessibility
Linnea Vizard Adie Margineanu
![Page 2: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/2.jpg)
Why focus on digital accessibility?
• Accessibility helps everyone
• Accessibility has huge financial benefits
• Accessibility is the law
![Page 3: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/3.jpg)
Outline
Understanding disability and accessible design
Benefits of accessible design
Web Content Accessibility Guidelines (WCAG)
Applying WCAG
Testing accessibility
Q&A
![Page 4: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/4.jpg)
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
![Page 5: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/5.jpg)
https://www.youtube.com/watch?v=x31u1seLTo0&feature=youtu.be
![Page 6: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/6.jpg)
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
![Page 7: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/7.jpg)
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.
![Page 8: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/8.jpg)
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
![Page 9: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/9.jpg)
Accessible design approaches
![Page 10: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/10.jpg)
10
Universal design is
a one size fits all approach
originated in architecture and industrial design
- Inclusive Design Research Centre, OCAD
![Page 11: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/11.jpg)
![Page 12: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/12.jpg)
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
![Page 13: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/13.jpg)
![Page 14: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/14.jpg)
Accessibility helps everyone.
![Page 15: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/15.jpg)
Accessibility is for everyone
Curb cuts Image from: https://asyourworldchanges.wordpress.com/2008/10/06/using-the-curb-cuts-principle-to-reboot-computing/
![Page 16: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/16.jpg)
• Curb cuts
• Closed captioning
• Automatic doors
• Accessible washrooms
Accessibility is for everyone
Closed captioning https://en.wikipedia.org/wiki/Subtitle_(captioning)
![Page 17: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/17.jpg)
• 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
![Page 18: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/18.jpg)
Accessibility has financial benefits.
![Page 19: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/19.jpg)
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
![Page 20: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/20.jpg)
Accessibility is the law.
![Page 21: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/21.jpg)
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
![Page 22: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/22.jpg)
Web Content Accessibility Guidelines 2.0
![Page 23: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/23.jpg)
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.
![Page 24: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/24.jpg)
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
![Page 25: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/25.jpg)
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
![Page 26: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/26.jpg)
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.
![Page 27: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/27.jpg)
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.”
![Page 28: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/28.jpg)
Visuals
• Provide alternative text
![Page 29: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/29.jpg)
Visuals
• Use adequate color contrast
![Page 30: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/30.jpg)
Visuals • Use logical/hierarchical organization and descriptive,
succinct page titles
![Page 31: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/31.jpg)
Language • Use clear sentences • Provide definitions for unfamiliar concepts
![Page 32: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/32.jpg)
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
![Page 33: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/33.jpg)
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
![Page 34: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/34.jpg)
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
![Page 35: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/35.jpg)
Testing with users
• Usability vs accessibility testing?
• Remote vs in person
• Recruiting
• Technology versioning
![Page 36: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/36.jpg)
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
![Page 37: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/37.jpg)
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
![Page 38: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/38.jpg)
Auditing digital products for accessibility
• Colour contrast and visual design check
• Keyboard check
• Screen reader check
• Manual and automated code check
![Page 39: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/39.jpg)
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/
![Page 40: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/40.jpg)
Sim Daltonism
• Colour blindness simulator app for Mac OS X
40
Available on the App Store (free)https://michelf.ca/projects/sim-daltonism/
![Page 41: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/41.jpg)
Photoshop tools
• View > Proof Setup > Colour Blindness
41
Integrated colour blindness checkers
![Page 42: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/42.jpg)
Greyscale
• View your design in greyscale
42
![Page 43: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/43.jpg)
Keyboard check
![Page 44: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/44.jpg)
Screen reader check
![Page 45: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/45.jpg)
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
![Page 46: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/46.jpg)
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
![Page 47: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/47.jpg)
HTML CodeSniffer
• Browser extension • Cut and paste code
• Results need appropriate interpretation
• For example: image alt tags
47
http://squizlabs.github.io/HTML_CodeSniffer/
![Page 48: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/48.jpg)
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.
![Page 49: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/49.jpg)
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/
![Page 50: Designing and Testing for Digital Accessibility](https://reader031.fdocuments.net/reader031/viewer/2022021506/58a4ed511a28abd8548b5aa7/html5/thumbnails/50.jpg)
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