![Page 1: Accessibility testing world usability day 2013 - mount royal university](https://reader038.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/reader038/viewer/2022110115/54980614b479591e608b4575/html5/thumbnails/25.jpg)
8. Rinse & Repeat
![Page 26: Accessibility testing world usability day 2013 - mount royal university](https://reader038.vdocument.in/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.vdocument.in/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.vdocument.in/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.vdocument.in/reader038/viewer/2022110115/54980614b479591e608b4575/html5/thumbnails/29.jpg)
Thank you MRU!
@PatrickDunphy