Check HTML Accessibility

Automated accessibility checkers can help you spot problems in your pages. You should think of them as metal detectors, though, not yard sticks. Don’t use them to measure whether your page is accessible or not. Use them to spot things under the surface, in the HTML, that you may want to dig into.

Accessibility Checker in Pilot’s HTML Editor

(Beginning in Fall 2018) Pilot’s HTML editor has an accessibility checker built in. The best thing about this checker is that it sits where you need it, in the editor while you’re creating content. With most accessibility tools, you have to check pages outside of Pilot. Also, the built-in checker helps you correct some problems, such as missing alternative text or insufficient color contrast.

Video on Pilot’s HTML Editor

Learn more about the Brightspace Accessibility Checker in Pilot.

WAVE Evaluation Tool for Chrome or Firefox

This browser extension will show you images that don’t have alternative text, headings that aren’t in order, colors with too little contrast and other issues that normally aren’t easy to determine by looking at the surface of a document. It can save you a lot of time.

Learn about the WAVE Evaluation Tool for Chrome or Firefox.

Web Developer Extension for Chrome or Firefox

This is not an accessibility checker. It’s a tool for Web developers. But you can use it to check a lot of accessibility issues. And it offers some alternative ways of looking at pages, which more advanced users may find helpful.

Learn about the Web Developer Extension for Chrome or Firefox.

Other Firefox Extensions You May Find Helpful

WCAG Contrast Checker

The WCAG Contrast Checker works a lot like WAVE Evaluation Tool in that it lists problems in a left sidebar. But this is for color contrast only.

Juicy Studio Accessibility Toolbar

This Firefox toolbar is great for checking the associations between heading and data cells in a table.

Learn about the WCAG Contrast Checker and the Juicy Studio Accessibility Toolbar.

Colour Contrast Analyser

The WAVE extension and the WCAG Contrast Checker can usually check text/background contrast, but might be wrong if there is a background image. The Colour Contrast Analyser will check color contrast anywhere on your screen. Just sample the colors with an eyedropper tool.

Test with a Screen Reader

It may seem odd that this is last, given that so much of accessibility is about screen readers. But screen readers can be challenging to use. Chances are, you won’t use one like someone who uses one every day. Plus, most screen readers have some built-in forgiveness for common ways that people write HTML incorrectly. Although a screen reader can read a page, that’s not proof that all is well in the HTML. It’s best not to rely on a screen reader alone to determine whether or not a page is accessible.

One thing great about using a screen reader is that it helps you make sense of the things we do for accessibility. Below are some resources if you’d like to give a screen reader a whirl.