accessibility testing tools for developers - seattle code camp

Accessibility Testing Toolsfor Developers

CONTACTAccessibility Testing Tools for Developers

Gerard K. CohenFront-End Ux Architect/ Senior Accessibility Lead

email://gerardkcohen@gmail.comtwitter:// @gerardkcohen

Accessibility Testing?

Basic Test #1

BASIC TESTINGAccessibility Testing Tools for Developers

HTML Validatorhttps://validator.w3.org/nu/

BASIC TESTINGAccessibility Testing Tools for Developers

HTML ValidatorWeb Developer Tools

http://chrispederick.com/work/web-developer/

BASIC TESTINGAccessibility Testing Tools for Developers

HTML ValidatorLocal Validator

https://github.com/validator/validator

Basic Test #2

BASIC TESTINGAccessibility Testing Tools for Developers

TAB KEY

BASIC TESTINGAccessibility Testing Tools for Developers

tabindex=“-1”tabindex=“0”tabindex=“1”

Basic TestsHTML Validation

Keyboard focus with TAB

CSS Bookmarklets

CSS BOOKMARKLETSAccessibility Testing Tools for Developers

debugCSSDeveloped by Yahoo!

http://yahoo.github.io/debugCSS/http://imbrianj.github.io/debugCSS/

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/

CSS BOOKMARKLETSAccessibility Testing Tools for Developers

Revenge.CSSDeveloped by Heydon Pickering

https://github.com/Heydon/REVENGE.CSS

CSS BOOKMARKLETSAccessibility Testing Tools for Developers

Custom Rules

CSS BOOKMARKLETSAccessibility Testing Tools for Developers

Custom RulesEx: CSS Toolbar “Widget”

role=“group” aria-label=“some label”

JS Bookmarklets

JS BOOKMARKLETSAccessibility Testing Tools for Developers

tota11yDeveloped by Khan Academyhttp://khan.github.io/tota11y/

JS BOOKMARKLETSAccessibility Testing Tools for Developers

HTML CodeSnifferDeveloped by Squiz

http://squizlabs.github.io/HTML_CodeSniffer

Browser Plugins

Browser PluginsAccessibility Testing Tools for Developers

Web Developer ToolsDeveloped by Chris Pederik

http://chrispederick.com/work/web-developer/

Browser PluginsAccessibility Testing Tools for Developers

Accessibility Developer ToolsDeveloped by Chrome

Browser PluginsAccessibility Testing Tools for Developers

ChromelensChrome Web Store

Browser PluginsAccessibility Testing Tools for Developers

WAVEDeveloped by WebAim

http://wave.webaim.org/extension/

Browser PluginsAccessibility Testing Tools for Developers

aXeDeveloped by Deque

http://www.deque.com/products/axe/

Browser PluginsAccessibility Testing Tools for Developers

TenonDeveloped by Karl Groves

http://tenon.io/

Advanced Testing

What’s Next?

Conclusion