workshop: usability testing for accessibility
TRANSCRIPT
![Page 1: Workshop: Usability Testing for Accessibility](https://reader031.vdocuments.net/reader031/viewer/2022021423/58a4ed371a28abd8548b5a53/html5/thumbnails/1.jpg)
Usability Testing for Accessibility
![Page 2: Workshop: Usability Testing for Accessibility](https://reader031.vdocuments.net/reader031/viewer/2022021423/58a4ed371a28abd8548b5a53/html5/thumbnails/2.jpg)
2
About Linn & Heather
![Page 3: Workshop: Usability Testing for Accessibility](https://reader031.vdocuments.net/reader031/viewer/2022021423/58a4ed371a28abd8548b5a53/html5/thumbnails/3.jpg)
• Types of impairments and assistive technologies
• How to test for accessibility with automated and manual
accessibility evaluation tools
• Preparing to test with users
• How to test for accessibility with real users
• Usability testing vs. accessibility testing
What you’re going to learn
3
![Page 4: Workshop: Usability Testing for Accessibility](https://reader031.vdocuments.net/reader031/viewer/2022021423/58a4ed371a28abd8548b5a53/html5/thumbnails/4.jpg)
Types of impairments that can impact how people use your website
4
Visual impairments Auditory impairments
Mobility impairments Cognitive impairments
![Page 5: Workshop: Usability Testing for Accessibility](https://reader031.vdocuments.net/reader031/viewer/2022021423/58a4ed371a28abd8548b5a53/html5/thumbnails/5.jpg)
Overview of Assistive Technology
• Screen readers (JAWS, NVDA, VoiceOver, TalkBack)
5
Image credit: http://westernblind.blogspot.ca/2011/06/cat-skills-zoomtext.html
• Screen magnification (ZoomText, through the browser)
• Speech recognition (Dragon NaturallySpeaking)
• Eye-tracking, dynamic braille display, alternative keyboard, oversized trackball mouse, etc.
![Page 6: Workshop: Usability Testing for Accessibility](https://reader031.vdocuments.net/reader031/viewer/2022021423/58a4ed371a28abd8548b5a53/html5/thumbnails/6.jpg)
Making sure the product is accessible
• 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
6
![Page 7: Workshop: Usability Testing for Accessibility](https://reader031.vdocuments.net/reader031/viewer/2022021423/58a4ed371a28abd8548b5a53/html5/thumbnails/7.jpg)
What to test with
• Can’t be low fidelity/paper prototype
• Must be compatible with assistive technology
7
![Page 8: Workshop: Usability Testing for Accessibility](https://reader031.vdocuments.net/reader031/viewer/2022021423/58a4ed371a28abd8548b5a53/html5/thumbnails/8.jpg)
Ensuring test artifact is ready
• Don’t want to waste time • Code to WCAG 2.0 standards
• Manual and automated accessibility evaluation tools • Test it yourself
8
![Page 9: Workshop: Usability Testing for Accessibility](https://reader031.vdocuments.net/reader031/viewer/2022021423/58a4ed371a28abd8548b5a53/html5/thumbnails/9.jpg)
HTML CodeSniffer
• Browser extension • Cut and paste code
9
http://squizlabs.github.io/HTML_CodeSniffer/
![Page 10: Workshop: Usability Testing for Accessibility](https://reader031.vdocuments.net/reader031/viewer/2022021423/58a4ed371a28abd8548b5a53/html5/thumbnails/10.jpg)
HTML CodeSniffer
• Results need appropriate interpretation
• Tool will point to error on the screen, if available
10
![Page 11: Workshop: Usability Testing for Accessibility](https://reader031.vdocuments.net/reader031/viewer/2022021423/58a4ed371a28abd8548b5a53/html5/thumbnails/11.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.
11
![Page 12: Workshop: Usability Testing for Accessibility](https://reader031.vdocuments.net/reader031/viewer/2022021423/58a4ed371a28abd8548b5a53/html5/thumbnails/12.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
12
![Page 13: Workshop: Usability Testing for Accessibility](https://reader031.vdocuments.net/reader031/viewer/2022021423/58a4ed371a28abd8548b5a53/html5/thumbnails/13.jpg)
http://www.paciellogroup.com/resources/contrastanalyser/
Colour Contrast Analyser app
• Free for Windows and Mac
• Colour contrast ratio for level AA should be at least 4.5:1 for normal text and 3:1 for large text
13
![Page 14: Workshop: Usability Testing for Accessibility](https://reader031.vdocuments.net/reader031/viewer/2022021423/58a4ed371a28abd8548b5a53/html5/thumbnails/14.jpg)
Colour Contrast Analyser app
• Ability to check colour contrast for different types of colour blindness
14
![Page 15: Workshop: Usability Testing for Accessibility](https://reader031.vdocuments.net/reader031/viewer/2022021423/58a4ed371a28abd8548b5a53/html5/thumbnails/15.jpg)
Sim Daltonism
• Free Colour blindness simulator app for Mac OS X
• “Filters in real-time the area around the mouse pointer and displays the result – as seen by a color blind person – in a floating palette”
15
https://michelf.ca/projects/sim-daltonism/
![Page 16: Workshop: Usability Testing for Accessibility](https://reader031.vdocuments.net/reader031/viewer/2022021423/58a4ed371a28abd8548b5a53/html5/thumbnails/16.jpg)
Sim Daltonism
16
![Page 17: Workshop: Usability Testing for Accessibility](https://reader031.vdocuments.net/reader031/viewer/2022021423/58a4ed371a28abd8548b5a53/html5/thumbnails/17.jpg)
Sim Daltonism
17
• Best for large screens, dual displays or shrunken to a smaller window
![Page 18: Workshop: Usability Testing for Accessibility](https://reader031.vdocuments.net/reader031/viewer/2022021423/58a4ed371a28abd8548b5a53/html5/thumbnails/18.jpg)
Photoshop tools
• View > Proof Setup > Colour Blindness
18
Integrated colour blindness simulator
![Page 19: Workshop: Usability Testing for Accessibility](https://reader031.vdocuments.net/reader031/viewer/2022021423/58a4ed371a28abd8548b5a53/html5/thumbnails/19.jpg)
Greyscale
• View your design in greyscale
19
![Page 20: Workshop: Usability Testing for Accessibility](https://reader031.vdocuments.net/reader031/viewer/2022021423/58a4ed371a28abd8548b5a53/html5/thumbnails/20.jpg)
20
Automated test
Fix
Repeat
Test with users
![Page 21: Workshop: Usability Testing for Accessibility](https://reader031.vdocuments.net/reader031/viewer/2022021423/58a4ed371a28abd8548b5a53/html5/thumbnails/21.jpg)
Testing with users
• Recruit some representative users
• Ask users to perform representative tasks
• Observe users successes and failures
21
![Page 22: Workshop: Usability Testing for Accessibility](https://reader031.vdocuments.net/reader031/viewer/2022021423/58a4ed371a28abd8548b5a53/html5/thumbnails/22.jpg)
Things to consider
• When to test
• Plan the test
• Sample sizes
• Recruit
• Incentives
• Recording waivers
22
![Page 23: Workshop: Usability Testing for Accessibility](https://reader031.vdocuments.net/reader031/viewer/2022021423/58a4ed371a28abd8548b5a53/html5/thumbnails/23.jpg)
Planning research
23
![Page 24: Workshop: Usability Testing for Accessibility](https://reader031.vdocuments.net/reader031/viewer/2022021423/58a4ed371a28abd8548b5a53/html5/thumbnails/24.jpg)
Usability vs Accessibility testing
• Methodology is the same
24
• Being mindful when facilitating
• Tasks for screen reader to include everything
• Adapt number of tasks
• More specific recruiting
• Using users set up – going into their home
![Page 25: Workshop: Usability Testing for Accessibility](https://reader031.vdocuments.net/reader031/viewer/2022021423/58a4ed371a28abd8548b5a53/html5/thumbnails/25.jpg)
Recruiting for accessibility testing with users • Professional recruit
• Personal networks
• Challenging to find larger samples
• Novice vs. expert users
25
![Page 26: Workshop: Usability Testing for Accessibility](https://reader031.vdocuments.net/reader031/viewer/2022021423/58a4ed371a28abd8548b5a53/html5/thumbnails/26.jpg)
What to test on
• Think about the device (laptop, mobile, desktop, tablet)
• Type of assistive technology
26
![Page 27: Workshop: Usability Testing for Accessibility](https://reader031.vdocuments.net/reader031/viewer/2022021423/58a4ed371a28abd8548b5a53/html5/thumbnails/27.jpg)
Personal set up
• Set up is calibrated in specific ways
27
Image credit: http://www.cccblog.org/2014/05/16/visions2025-interactions/
• Avoid bringing a cast of 1000s
• Recording can be a challenge • Important to note the specifics of
the user’s set ups and settings
• Speed of the screen reader
• Advanced screen reader user’s can get up to 900-1200 words per minute
![Page 28: Workshop: Usability Testing for Accessibility](https://reader031.vdocuments.net/reader031/viewer/2022021423/58a4ed371a28abd8548b5a53/html5/thumbnails/28.jpg)
Technology versioning
• Assistive technology can be quite finicky • People don’t always upgrade to new versions
• Intense learning curve
28
![Page 29: Workshop: Usability Testing for Accessibility](https://reader031.vdocuments.net/reader031/viewer/2022021423/58a4ed371a28abd8548b5a53/html5/thumbnails/29.jpg)
Testing at a facility
• Facility itself has to be accessible • User’s tech set up needs to be portable • Alternatively -allow time for the participant to
calibrate the technology
29
![Page 30: Workshop: Usability Testing for Accessibility](https://reader031.vdocuments.net/reader031/viewer/2022021423/58a4ed371a28abd8548b5a53/html5/thumbnails/30.jpg)
Remote testing
• Difficult to view user’s tech set up and how they use it
• Software/applications needed to download must be accessible
• Software/application must not interfere
• Tech issues -> difficult to help find solutions
30
![Page 31: Workshop: Usability Testing for Accessibility](https://reader031.vdocuments.net/reader031/viewer/2022021423/58a4ed371a28abd8548b5a53/html5/thumbnails/31.jpg)
Facilitation
• Usual facilitation techniques: echo, boomerang, columbo
31
• Need to avoid using visual cues/clues • Any supporting printed material needs to be large and
clearly legible • When testing with screen readers, you may need to ask
users to slow down their speed (words per minute)
![Page 32: Workshop: Usability Testing for Accessibility](https://reader031.vdocuments.net/reader031/viewer/2022021423/58a4ed371a28abd8548b5a53/html5/thumbnails/32.jpg)
Analysing results
32
• Identifying quick wins
• Being able to reproduce issues
• Task completion
• Communicating the results
![Page 33: Workshop: Usability Testing for Accessibility](https://reader031.vdocuments.net/reader031/viewer/2022021423/58a4ed371a28abd8548b5a53/html5/thumbnails/33.jpg)
Challenges
33
• Recruiting
• Getting enough users with the same technology
• Travel time going to people’s homes
• Recording
• Things not coded to standard meant upfront effort recruiting, planning was ‘wasted’
• Forgetting to note down people’s set ups
• Sometimes you can’t recreate the set ups
• Wide range of technologies meant hard to identify patterns
![Page 34: Workshop: Usability Testing for Accessibility](https://reader031.vdocuments.net/reader031/viewer/2022021423/58a4ed371a28abd8548b5a53/html5/thumbnails/34.jpg)
Questions?
34
![Page 35: Workshop: Usability Testing for Accessibility](https://reader031.vdocuments.net/reader031/viewer/2022021423/58a4ed371a28abd8548b5a53/html5/thumbnails/35.jpg)
Usability Matters 215 Spadina Ave, Toronto
www.usabilitymatters.com
Thank you
facebook.com/UsabilityMattersInc
@umatters
linkedin.com/company/usability-matters
Heather Moore 416 598 7770 ex 20
Linn Vizard
416 598 7770 ex 19