Accessibility Testing Tools for Developers - Seattle Code Camp
-
Upload
gerardkcohen -
Category
Technology
-
view
570 -
download
2
Transcript of Accessibility Testing Tools for Developers - Seattle Code Camp
![Page 1: Accessibility Testing Tools for Developers - Seattle Code Camp](https://reader036.fdocuments.net/reader036/viewer/2022062316/58a1cab71a28ab9d338b62fd/html5/thumbnails/1.jpg)
Accessibility Testing Toolsfor Developers
![Page 2: Accessibility Testing Tools for Developers - Seattle Code Camp](https://reader036.fdocuments.net/reader036/viewer/2022062316/58a1cab71a28ab9d338b62fd/html5/thumbnails/2.jpg)
CONTACTAccessibility Testing Tools for Developers
Gerard K. CohenFront-End Ux Architect/ Senior Accessibility Lead
email://[email protected]:// @gerardkcohen
![Page 3: Accessibility Testing Tools for Developers - Seattle Code Camp](https://reader036.fdocuments.net/reader036/viewer/2022062316/58a1cab71a28ab9d338b62fd/html5/thumbnails/3.jpg)
Accessibility Testing?
![Page 4: Accessibility Testing Tools for Developers - Seattle Code Camp](https://reader036.fdocuments.net/reader036/viewer/2022062316/58a1cab71a28ab9d338b62fd/html5/thumbnails/4.jpg)
![Page 5: Accessibility Testing Tools for Developers - Seattle Code Camp](https://reader036.fdocuments.net/reader036/viewer/2022062316/58a1cab71a28ab9d338b62fd/html5/thumbnails/5.jpg)
Basic Test #1
![Page 6: Accessibility Testing Tools for Developers - Seattle Code Camp](https://reader036.fdocuments.net/reader036/viewer/2022062316/58a1cab71a28ab9d338b62fd/html5/thumbnails/6.jpg)
BASIC TESTINGAccessibility Testing Tools for Developers
HTML Validatorhttps://validator.w3.org/nu/
![Page 7: Accessibility Testing Tools for Developers - Seattle Code Camp](https://reader036.fdocuments.net/reader036/viewer/2022062316/58a1cab71a28ab9d338b62fd/html5/thumbnails/7.jpg)
BASIC TESTINGAccessibility Testing Tools for Developers
HTML ValidatorWeb Developer Tools
http://chrispederick.com/work/web-developer/
![Page 8: Accessibility Testing Tools for Developers - Seattle Code Camp](https://reader036.fdocuments.net/reader036/viewer/2022062316/58a1cab71a28ab9d338b62fd/html5/thumbnails/8.jpg)
BASIC TESTINGAccessibility Testing Tools for Developers
HTML ValidatorLocal Validator
https://github.com/validator/validator
![Page 9: Accessibility Testing Tools for Developers - Seattle Code Camp](https://reader036.fdocuments.net/reader036/viewer/2022062316/58a1cab71a28ab9d338b62fd/html5/thumbnails/9.jpg)
Basic Test #2
![Page 10: Accessibility Testing Tools for Developers - Seattle Code Camp](https://reader036.fdocuments.net/reader036/viewer/2022062316/58a1cab71a28ab9d338b62fd/html5/thumbnails/10.jpg)
![Page 11: Accessibility Testing Tools for Developers - Seattle Code Camp](https://reader036.fdocuments.net/reader036/viewer/2022062316/58a1cab71a28ab9d338b62fd/html5/thumbnails/11.jpg)
BASIC TESTINGAccessibility Testing Tools for Developers
TAB KEY
![Page 12: Accessibility Testing Tools for Developers - Seattle Code Camp](https://reader036.fdocuments.net/reader036/viewer/2022062316/58a1cab71a28ab9d338b62fd/html5/thumbnails/12.jpg)
![Page 13: Accessibility Testing Tools for Developers - Seattle Code Camp](https://reader036.fdocuments.net/reader036/viewer/2022062316/58a1cab71a28ab9d338b62fd/html5/thumbnails/13.jpg)
BASIC TESTINGAccessibility Testing Tools for Developers
tabindex=“-1”tabindex=“0”tabindex=“1”
![Page 14: Accessibility Testing Tools for Developers - Seattle Code Camp](https://reader036.fdocuments.net/reader036/viewer/2022062316/58a1cab71a28ab9d338b62fd/html5/thumbnails/14.jpg)
Basic TestsHTML Validation
Keyboard focus with TAB
![Page 15: Accessibility Testing Tools for Developers - Seattle Code Camp](https://reader036.fdocuments.net/reader036/viewer/2022062316/58a1cab71a28ab9d338b62fd/html5/thumbnails/15.jpg)
CSS Bookmarklets
![Page 16: Accessibility Testing Tools for Developers - Seattle Code Camp](https://reader036.fdocuments.net/reader036/viewer/2022062316/58a1cab71a28ab9d338b62fd/html5/thumbnails/16.jpg)
CSS BOOKMARKLETSAccessibility Testing Tools for Developers
debugCSSDeveloped by Yahoo!
http://yahoo.github.io/debugCSS/http://imbrianj.github.io/debugCSS/
![Page 17: Accessibility Testing Tools for Developers - Seattle Code Camp](https://reader036.fdocuments.net/reader036/viewer/2022062316/58a1cab71a28ab9d338b62fd/html5/thumbnails/17.jpg)
CSS BOOKMARKLETSAccessibility Testing Tools for Developers
Diagnostic.cssDeveloped by Karl Groves
http://www.karlgroves.com/2013/09/07/diagnostic-css-super-quick-web-accessibility-testing/
![Page 18: Accessibility Testing Tools for Developers - Seattle Code Camp](https://reader036.fdocuments.net/reader036/viewer/2022062316/58a1cab71a28ab9d338b62fd/html5/thumbnails/18.jpg)
CSS BOOKMARKLETSAccessibility Testing Tools for Developers
Revenge.CSSDeveloped by Heydon Pickering
https://github.com/Heydon/REVENGE.CSS
![Page 19: Accessibility Testing Tools for Developers - Seattle Code Camp](https://reader036.fdocuments.net/reader036/viewer/2022062316/58a1cab71a28ab9d338b62fd/html5/thumbnails/19.jpg)
CSS BOOKMARKLETSAccessibility Testing Tools for Developers
Custom Rules
![Page 20: Accessibility Testing Tools for Developers - Seattle Code Camp](https://reader036.fdocuments.net/reader036/viewer/2022062316/58a1cab71a28ab9d338b62fd/html5/thumbnails/20.jpg)
CSS BOOKMARKLETSAccessibility Testing Tools for Developers
Custom RulesEx: CSS Toolbar “Widget”
role=“group” aria-label=“some label”
![Page 21: Accessibility Testing Tools for Developers - Seattle Code Camp](https://reader036.fdocuments.net/reader036/viewer/2022062316/58a1cab71a28ab9d338b62fd/html5/thumbnails/21.jpg)
![Page 22: Accessibility Testing Tools for Developers - Seattle Code Camp](https://reader036.fdocuments.net/reader036/viewer/2022062316/58a1cab71a28ab9d338b62fd/html5/thumbnails/22.jpg)
![Page 23: Accessibility Testing Tools for Developers - Seattle Code Camp](https://reader036.fdocuments.net/reader036/viewer/2022062316/58a1cab71a28ab9d338b62fd/html5/thumbnails/23.jpg)
JS Bookmarklets
![Page 24: Accessibility Testing Tools for Developers - Seattle Code Camp](https://reader036.fdocuments.net/reader036/viewer/2022062316/58a1cab71a28ab9d338b62fd/html5/thumbnails/24.jpg)
JS BOOKMARKLETSAccessibility Testing Tools for Developers
tota11yDeveloped by Khan Academyhttp://khan.github.io/tota11y/
![Page 25: Accessibility Testing Tools for Developers - Seattle Code Camp](https://reader036.fdocuments.net/reader036/viewer/2022062316/58a1cab71a28ab9d338b62fd/html5/thumbnails/25.jpg)
JS BOOKMARKLETSAccessibility Testing Tools for Developers
HTML CodeSnifferDeveloped by Squiz
http://squizlabs.github.io/HTML_CodeSniffer
![Page 26: Accessibility Testing Tools for Developers - Seattle Code Camp](https://reader036.fdocuments.net/reader036/viewer/2022062316/58a1cab71a28ab9d338b62fd/html5/thumbnails/26.jpg)
Browser Plugins
![Page 27: Accessibility Testing Tools for Developers - Seattle Code Camp](https://reader036.fdocuments.net/reader036/viewer/2022062316/58a1cab71a28ab9d338b62fd/html5/thumbnails/27.jpg)
Browser PluginsAccessibility Testing Tools for Developers
Web Developer ToolsDeveloped by Chris Pederik
http://chrispederick.com/work/web-developer/
![Page 28: Accessibility Testing Tools for Developers - Seattle Code Camp](https://reader036.fdocuments.net/reader036/viewer/2022062316/58a1cab71a28ab9d338b62fd/html5/thumbnails/28.jpg)
Browser PluginsAccessibility Testing Tools for Developers
Accessibility Developer ToolsDeveloped by Chrome
![Page 29: Accessibility Testing Tools for Developers - Seattle Code Camp](https://reader036.fdocuments.net/reader036/viewer/2022062316/58a1cab71a28ab9d338b62fd/html5/thumbnails/29.jpg)
![Page 30: Accessibility Testing Tools for Developers - Seattle Code Camp](https://reader036.fdocuments.net/reader036/viewer/2022062316/58a1cab71a28ab9d338b62fd/html5/thumbnails/30.jpg)
![Page 31: Accessibility Testing Tools for Developers - Seattle Code Camp](https://reader036.fdocuments.net/reader036/viewer/2022062316/58a1cab71a28ab9d338b62fd/html5/thumbnails/31.jpg)
Browser PluginsAccessibility Testing Tools for Developers
ChromelensChrome Web Store
![Page 32: Accessibility Testing Tools for Developers - Seattle Code Camp](https://reader036.fdocuments.net/reader036/viewer/2022062316/58a1cab71a28ab9d338b62fd/html5/thumbnails/32.jpg)
Browser PluginsAccessibility Testing Tools for Developers
WAVEDeveloped by WebAim
http://wave.webaim.org/extension/
![Page 33: Accessibility Testing Tools for Developers - Seattle Code Camp](https://reader036.fdocuments.net/reader036/viewer/2022062316/58a1cab71a28ab9d338b62fd/html5/thumbnails/33.jpg)
Browser PluginsAccessibility Testing Tools for Developers
aXeDeveloped by Deque
http://www.deque.com/products/axe/
![Page 34: Accessibility Testing Tools for Developers - Seattle Code Camp](https://reader036.fdocuments.net/reader036/viewer/2022062316/58a1cab71a28ab9d338b62fd/html5/thumbnails/34.jpg)
Browser PluginsAccessibility Testing Tools for Developers
TenonDeveloped by Karl Groves
http://tenon.io/
![Page 35: Accessibility Testing Tools for Developers - Seattle Code Camp](https://reader036.fdocuments.net/reader036/viewer/2022062316/58a1cab71a28ab9d338b62fd/html5/thumbnails/35.jpg)
Advanced Testing
![Page 36: Accessibility Testing Tools for Developers - Seattle Code Camp](https://reader036.fdocuments.net/reader036/viewer/2022062316/58a1cab71a28ab9d338b62fd/html5/thumbnails/36.jpg)
What’s Next?
![Page 37: Accessibility Testing Tools for Developers - Seattle Code Camp](https://reader036.fdocuments.net/reader036/viewer/2022062316/58a1cab71a28ab9d338b62fd/html5/thumbnails/37.jpg)
Conclusion