Firefox Extensions

In addition to the Web Developer Extension, you may want to add the WCAG Contrast Checker and the Juicy Studio Accessibility Toolbar to help you check HTML accessibility with Firefox.

WCAG Contrast Checker

This extension quickly checks the contrast between text and background throughout an HTML page.

Get the WCAG Contrast Checker for Firefox

Once installed, it adds a “WCAG Contrast Checker” item to your Firefox “Tools” menu. As with other accessibility checkers, it’s best to open the page in a new tab or window so you are only checking the page and not all of Pilot’s surrounding navigation. When you choose the checker from the Tools menu, it then lists all the text and background combinations it finds. These appear in a sidebar on the left of the browser window with a red X in front of any combination that does not meet accessibility standards. Click any item in the list and the extension will display a red outline around the corresponding element in the page. The checker all shows the color values and other information about the item you’ve selected.

Juicy Studio Accessibility Toolbar (for advanced use)

I would not recommend that you clutter your browser with yet another toolbar if it weren’t for this extension’s excellent Table Inspector. This tool will show you associations between heading cells and data cells in a table.

Get the Juicy Studio Accessibility Toolbar for Firefox

Check a Table with the Juicy Studio Accessibility Toolbar

  1. First, pop the page out of Pilot’s content frame.
  2. Click “Table Inspector” on the toolbar, or choose it from under the Firefox “Tools” menu.

Before:

A table before applying the table inspector.
This image shows a table that was marked up well. But you cannot tell just be looking.

After:

A portion of the same table as above, but after applying the Table Inspector.
This detail shows how the Table Inspector adds green boxes to each cell showing how the table cells are associated with each other.