Chrome Extensions for Accessible Design

Chrome Extensions for Accessible Design
Recently, I was asked for recommendations for user-friendly Chrome Extensions to help promote accessible design within schools. Here are a few of my favorites that are all free.

  1. WAVE Evaluation Tool: This extension will compare your webpage against the Web Content Accessibility Guidelines WCAG 2.0 and identify various errors, including color contrast. 
  2. No Coffee: This extension functions as a vision simulator. It is helpful in demonstrating how a website might be perceived by users with various vision conditions including color blindness. This simulation tends to be uncomfortable to participants with average vision and they will look away. When I use this extension in training or classrooms, I point out that users with disabilities do not have this privilege. This brief simulation exercise helps drive home the importance of accessible design.
  3. ChromeVox: Chrome Screen Reader. Allows you to experience your materials through a screen reader. ChromeVox is native on Google Chromebooks using the Ctrl + Alt + Z. If you need help using ChromeVox, here are helpful ChromeVox tutorials and user guide from Google
  4. Color Contrast Analyzer: This extension will take a picture of a webpage and analyze it against WCAG 2.0 Color Contrast Analyzer.
  5. AxeAccessibility: (Geeky) This is my favorite and must-have for anyone working with code and within the Chrome Developer Console. This extension adds an accessibility panel to Developer Console. This is super-helpful because it runs an accessibility checker similar to the WAVE Evaluation tool above but this allows you to see the code at the same time. It is super helpful for making corrections. For example, I continue to improve the accessibility of this blog using this tool by making some tweaks to the template and within the css.
  6. Extensity: Not actually an accessible design tool but helps manage the extensions above so that you can easily enable/disable as needed.

No comments