Best Practices for Internally-Developed Digital Products

“When developing or redesigning a website or web application, evaluate accessibility early and throughout the development process to identify accessibility problems early, when it is easier to address them.” The World Wide Web Consortium’s (W3C) Web Accessibility Initiative (WAI) has a helpful evaluating web accessibility overview to help you get started, and the W3C accessibility standards overview introduces guidelines and other standards related to web accessibility.

Tools for Automated Testing 

Note: Resources are listed from “easy to use” to “requires specialist knowledge.”

Third Party Browser Extensions

Automated accessibility testing cannot replace manual testing by an actual human being, but it can be a good first step.

• Accessibility Bookmarklets
  Easy to use accessibility visualization toolkit to test websites or web-based programs by the University of Illinois
• Tota11y by Khan
  Another easy to use accessibility visualization toolkit to test websites or web-based programs
• WAVE Evaluation Tool Powered by WebAIM
  (wave.webaim.org) provides a website and browser extension that will check the accessibility of a URL
  • Tool Tip Video: WAVE – Paul Ojennus, Whitworth
• PAC 3 – Free PDF Accessibility Checker
  The freeware program PAC provides a fast way to test the accessibility of PDF files

Browsers’ Built-in Accessibility Tools

Modern versions of major browsers have their own accessibility tools built into their developer tools. For more information, see the documentation for the tools available in your preferred browser.

• Chrome DevTools Accessibility Reference
  Must have a basic understanding of DevTools
• Firefox Accessibility Inspector
  The Accessibility Inspector provides a means to access important information exposed to assistive technologies on the current page via the accessibility tree. Must have basic knowledge of HTML.
• Microsoft Edge DevTools: Accessibility
  Similar to Firefox Inspector, view the accessible properties assigned to the selected element. Must have a basic understanding of DevTools

Color Checkers

• Colour Contrast Analyser
  Easy to use free application, available for Windows and Mac. Check foreground & background color combinations using an eyedropper tool from anywhere on the screen, including non-web based applications
• WCAG Contrast Checker for Firefox
  Firefox extension displays color contrast ratios in a sidebar, and flags the color combinations that fail WCAG contrast requirements.
• WebAIM Color Contrast Checker
  Online tool includes a feature to “lighten” or “darken” existing colors until you find a combination that meets WCAG 2.1 requirements. 
• Chrome High Contrast extension
  High Contrast lets you browse the web with your choice of several high-contrast color filters designed to make it easier to read text.      

Tools for Manual Testing

• #NoMouse Challenge
  Manual testing can be completed by navigating through the page using only keyboard commands rather than a mouse. No special skills needed.
• NVDA Screen Reader
  The NonVisual Desktop Access screen reader can be downloaded free of charge by anyone. Requires specialist knowledge.
  • Quick Reference Guide for Windows (PDF)
  • WebAIM guide on Using NVDA to Evaluate Web Accessibility
• VoiceOver
  Apple’s screen reader, which ships with Mac OS and iOS devices such as the iPhone and iPad. Requires specialist knowledge.
  • WebAIM guide on Using VoiceOver to Evaluate Web Accessibility.
• JAWS
  Jaws has been one of the most popular screen readers for many years, Jaws is not free, but anyone with a (dot) EDU email qualifies for the student annual licence pricing. Requires specialist knowledge.
  • WebAIM guide on Using JAWS to Evaluate Web Accessibility