accessibility testing world usability day 2013 - mount royal university
DESCRIPTION
As an invited speaker for World Usability Day in 2013, these slides feature are an introduction to Accessibility Testing for students in the Mount Royal University information design program.TRANSCRIPT
![Page 1: Accessibility testing world usability day 2013 - mount royal university](https://reader038.vdocuments.us/reader038/viewer/2022110115/54980614b479591e608b4575/html5/thumbnails/1.jpg)
ACCESSIBILITY TESTING 101@PatrickDunphy | World Usability Day
November 14, 2013
![Page 2: Accessibility testing world usability day 2013 - mount royal university](https://reader038.vdocuments.us/reader038/viewer/2022110115/54980614b479591e608b4575/html5/thumbnails/2.jpg)
TransplantedNewfoundlander
About me...
Embarrasses wifeat hockey games
ProudDaddy
![Page 3: Accessibility testing world usability day 2013 - mount royal university](https://reader038.vdocuments.us/reader038/viewer/2022110115/54980614b479591e608b4575/html5/thumbnails/3.jpg)
The REALBeginning
1999The
Beginning
My Accessibility Journey
ThePresent
![Page 4: Accessibility testing world usability day 2013 - mount royal university](https://reader038.vdocuments.us/reader038/viewer/2022110115/54980614b479591e608b4575/html5/thumbnails/4.jpg)
This is for Everyone “The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect.”
Sir Tim Berners-Lee, Inventor of the WWW
![Page 5: Accessibility testing world usability day 2013 - mount royal university](https://reader038.vdocuments.us/reader038/viewer/2022110115/54980614b479591e608b4575/html5/thumbnails/5.jpg)
Everyone = Accessible
• Closed Captions
• Meaningful Link Text
• Alternative Navigation
• Relative Sizing
• Logical Content Order
Different users. Different needs.
![Page 6: Accessibility testing world usability day 2013 - mount royal university](https://reader038.vdocuments.us/reader038/viewer/2022110115/54980614b479591e608b4575/html5/thumbnails/6.jpg)
Today’s Goal
Introduce Free Testing Tools
That are available to Anyone
and are Easy To Use
![Page 7: Accessibility testing world usability day 2013 - mount royal university](https://reader038.vdocuments.us/reader038/viewer/2022110115/54980614b479591e608b4575/html5/thumbnails/7.jpg)
General Accessibility Issues• Keyboard support• Sensory cues• Consistent navigation• No Context• Dynamic content• Controlling user experience
![Page 8: Accessibility testing world usability day 2013 - mount royal university](https://reader038.vdocuments.us/reader038/viewer/2022110115/54980614b479591e608b4575/html5/thumbnails/8.jpg)
Text & Content Issues
• Poor content structure• Inappropriate markup• Source order• Absolute font sizes• Poor contrast• Inappropriate link text• Language undefined
![Page 9: Accessibility testing world usability day 2013 - mount royal university](https://reader038.vdocuments.us/reader038/viewer/2022110115/54980614b479591e608b4575/html5/thumbnails/9.jpg)
Common Image Problems• Misuse of alt text• Missing alt attributes• Charts and graphs• CSS images• Title attributes• Baked image text (brand/logo exception)
![Page 10: Accessibility testing world usability day 2013 - mount royal university](https://reader038.vdocuments.us/reader038/viewer/2022110115/54980614b479591e608b4575/html5/thumbnails/10.jpg)
Where do I start?
1. Compile UI components – modules, containers, templates, pages
2. Prioritize frequency & prominence
3. Include elements typically challenging for persons with disabilities.
4. Determine your target goal.
![Page 11: Accessibility testing world usability day 2013 - mount royal university](https://reader038.vdocuments.us/reader038/viewer/2022110115/54980614b479591e608b4575/html5/thumbnails/11.jpg)
Sample Test Plan1. Sanity Test w/o CSS & Images2. Validate your code3. Validate for Accessibility• apply testing tools (at least 2) & verify results• contrast/context/order/alternatives
4. Check keyboard Accessibility5. Test with a screen reader6. Verify against target goal7. Conduct user testing8. Rinse & Repeat
![Page 12: Accessibility testing world usability day 2013 - mount royal university](https://reader038.vdocuments.us/reader038/viewer/2022110115/54980614b479591e608b4575/html5/thumbnails/12.jpg)
Today’s Test Subject
http://www.instra.com
![Page 13: Accessibility testing world usability day 2013 - mount royal university](https://reader038.vdocuments.us/reader038/viewer/2022110115/54980614b479591e608b4575/html5/thumbnails/13.jpg)
1. Disable CSS & Images
http://weba.im/webdevtoolbar
![Page 14: Accessibility testing world usability day 2013 - mount royal university](https://reader038.vdocuments.us/reader038/viewer/2022110115/54980614b479591e608b4575/html5/thumbnails/14.jpg)
2. Validate Your Code
http://validator.w3.org/
![Page 15: Accessibility testing world usability day 2013 - mount royal university](https://reader038.vdocuments.us/reader038/viewer/2022110115/54980614b479591e608b4575/html5/thumbnails/15.jpg)
3. Validate for Accessibility
Web Version
Toolbar
API
![Page 16: Accessibility testing world usability day 2013 - mount royal university](https://reader038.vdocuments.us/reader038/viewer/2022110115/54980614b479591e608b4575/html5/thumbnails/16.jpg)
Wave - Web Version
• Provides different views
• Determine target goal
• Summarizes results
• Instant Documentation
• Code inspector
* Wave is a tool to assist with evaluation, it’s not used to verify content is 100% accessible.
![Page 17: Accessibility testing world usability day 2013 - mount royal university](https://reader038.vdocuments.us/reader038/viewer/2022110115/54980614b479591e608b4575/html5/thumbnails/17.jpg)
Wave - Web Demo
http://wave.webaim.org
14 errors 181 alerts to verify 83 contrast errors Style / No style Maps to target Show outline
![Page 18: Accessibility testing world usability day 2013 - mount royal university](https://reader038.vdocuments.us/reader038/viewer/2022110115/54980614b479591e608b4575/html5/thumbnails/18.jpg)
Wave - Toolbar Demo
http://weba.im/toolbar
526(!) errors Evaluation includes
scripting Firefox Toolbar only Chrome release TBD
![Page 19: Accessibility testing world usability day 2013 - mount royal university](https://reader038.vdocuments.us/reader038/viewer/2022110115/54980614b479591e608b4575/html5/thumbnails/19.jpg)
3. Validate for Accessibility
http://weba.im/fangs
FANGS Toolbar Useful quick test Not a substitute for
real screen readers Useful for headings &
link text
![Page 20: Accessibility testing world usability day 2013 - mount royal university](https://reader038.vdocuments.us/reader038/viewer/2022110115/54980614b479591e608b4575/html5/thumbnails/20.jpg)
3. Validate for Accessibility
Accessibility Toolbar• Mulitple test types• Report generator• Navigation• Text Equivalents• Scripting• Uses other tools
http://weba.im/fae
![Page 21: Accessibility testing world usability day 2013 - mount royal university](https://reader038.vdocuments.us/reader038/viewer/2022110115/54980614b479591e608b4575/html5/thumbnails/21.jpg)
4. Use Your Keyboard
![Page 22: Accessibility testing world usability day 2013 - mount royal university](https://reader038.vdocuments.us/reader038/viewer/2022110115/54980614b479591e608b4575/html5/thumbnails/22.jpg)
5. Test with a Screen Reader
http://weba.im/jawsdemo http://nvaccess.org
JAWS VoiceOver NVDA
![Page 23: Accessibility testing world usability day 2013 - mount royal university](https://reader038.vdocuments.us/reader038/viewer/2022110115/54980614b479591e608b4575/html5/thumbnails/23.jpg)
6. Verify against Target Goal
AODA – Accessibility for Ontarians with Disabilities Act
WCAG 2.0 – Web Content Accessibility Guideline
BS 8878 – British Standards
CVAA – 21st Century Communications Video Accessibility Act
Section 508 – US Federal Accessibility Law
ADA – American’s with Disabilities Act
![Page 24: Accessibility testing world usability day 2013 - mount royal university](https://reader038.vdocuments.us/reader038/viewer/2022110115/54980614b479591e608b4575/html5/thumbnails/24.jpg)
7. Conduct User Testing
Involve Real People with Real Disabilities
PWD using AT will revealundiscovered issues
Include Seniors
![Page 25: Accessibility testing world usability day 2013 - mount royal university](https://reader038.vdocuments.us/reader038/viewer/2022110115/54980614b479591e608b4575/html5/thumbnails/25.jpg)
8. Rinse & Repeat
![Page 26: Accessibility testing world usability day 2013 - mount royal university](https://reader038.vdocuments.us/reader038/viewer/2022110115/54980614b479591e608b4575/html5/thumbnails/26.jpg)
Testing Takeaways
• No silver bullet – only 25-30% of errors• Always requires manual testing• Subjective by nature• Won’t identify issues revealed by real users with disabilities• Not one size fits all – different types of sites
![Page 27: Accessibility testing world usability day 2013 - mount royal university](https://reader038.vdocuments.us/reader038/viewer/2022110115/54980614b479591e608b4575/html5/thumbnails/27.jpg)
Useful Tools & Links
http://www.webaim.org
http://www.w3.org/WAI
https://atutor.ca
https://www.webaccessibility.com
http://www.webaxe.org
http://www.accessiq.org
Your keyboardWAVEScreen readersFANGS pluginWAT Toolbar (IE)Colour Contrast AnalyzerFireEyesDiagnostic.cssNoCoffee PluginFirebug, Web Dev ToolbarHigh Contrast Mode
![Page 28: Accessibility testing world usability day 2013 - mount royal university](https://reader038.vdocuments.us/reader038/viewer/2022110115/54980614b479591e608b4575/html5/thumbnails/28.jpg)
Final Words of Advice
• You are the most important testing tool• Don't just say no, offer solutions
• Engage the community (befriend #a11y)
• Don’t fear what you don’t know
• BE A SPONGE
• Share your knowledge
![Page 29: Accessibility testing world usability day 2013 - mount royal university](https://reader038.vdocuments.us/reader038/viewer/2022110115/54980614b479591e608b4575/html5/thumbnails/29.jpg)
Thank you MRU!
@PatrickDunphy