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://[email protected]:// @gerardkcohen

Accessibility Testing?

Basic Test #1

BASIC TESTINGAccessibility Testing Tools for Developers

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


HTML ValidatorWeb Developer Tools

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


HTML ValidatorLocal Validator

https://github.com/validator/validator

Basic Test #2


TAB KEY


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/


Diagnostic.cssDeveloped by Karl Groves

http://www.karlgroves.com/2013/09/07/diagnostic-css-super-quick-web-accessibility-testing/


Revenge.CSSDeveloped by Heydon Pickering

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


Custom Rules


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/


Accessibility Developer ToolsDeveloped by Chrome


ChromelensChrome Web Store


WAVEDeveloped by WebAim

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


aXeDeveloped by Deque

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


TenonDeveloped by Karl Groves

http://tenon.io/

Advanced Testing

What’s Next?

Conclusion

accessibility testing tools for developers - seattle code camp

Technology