Site Accessibility Tester Add-on for Firefox
This is a work-in-progress add-on for Firefox to serve as an aid to developers ensuring their web content is accessible.
While it's in the initial stages of development, it will only be available as a Temporary Add-on.
- Check out the repository locally
- From the root folder of the project, run the following:
sass popup/scss/choose_test.scss popup/css/choose_test.css --style compressedto generate the CSS
tscto compile the Typescript into JS
- Open Firefox and point to
about:debugging#addonsin the address bar
- Click on the
Load Temporary Add-on...button and navigate to the project directory and load the
Using the Add-on
Note: This add-on will only be available for the current session that it's loaded due to it being in a temporary load state.
Once the add-on has been loaded, visit any page, and open the Firefox developer tools (
F12 on most systems). This will show a menu similar to the following:
Tests are grouped under the Layout, Visual, or Audible tabs, depeding on the type of test. Each one will either affect the current page being viewed (such as one of the colour blindness filters) or it will output an error to the browsers console window (if there is any error to report).
For example, running the "Heading Levels" test on the
test sources/heading fail test.html page of the project will give an error report in the console similar to this:
The colour blindness and blur filter tests affect the page currently being viewed, and have no error output in the console. These tests are to help simulate the page under particular visual conditions, so that you can more easily identify any problem areas. Running the blur and achromatopsia colour blindness tests on my How Readable is Your Content? blog post will show something similar to this:
If a test produces an error message table, it will list out each element that fails the test. For example, if the heading levels on a page don't have a logical order, the entire heading list will be output.
Beside each element is a small icon:
Hovering this will highlight the element on the page, and clicking it will take you directly through to that element in the DOM inspector. This will help you get to the source of any problems more quickly.
|Layout||Heading levels||Check that the page starts with an
|Layout||Form element labels||Check that all visible form elements have labels that either wrap the element, or are associated via an
|Layout||Bold tags||Look for any use of
|Layout||Italic tags||Look for any use of
|Layout||Table appearance||Checks table elements have correct
|Layout||Event handlers||Looks for elements not interactive by default for any inline event handlers (e.g.
|Layout||Tabindex||Checks for elements with positive
|Visual||Image descriptions||Check that all images have
|Visual||Colour contrast||Look at all text and check the colour contrast ratio is at least 3:1 for large text or 4.5:1 for regular text, as detailed in the Web AIM Colour Contrast Checker|
|Visual||Font size||Checks for text below the minimum threshold of
|Visual||Toggle CSS||Toggle all CSS (found in external stylesheets,
|Visual||Video captions||Ensure that
|Visual||Autoplay video||Check for any
|Visual||Low vision (blur)||Applies a blur filter to the page to simulate poor vision|
|Visual||Colour blindness (all)||Applies a colour blindness simulation filter to the page. Only one colour blindness filter can be applied at any one time|
|Visual||Reset filters||Remove any blur or colour blindness filters currently applied|
|Audible||Audio captions||Ensure that any
|Audible||Autoplay audio||Check for any
- Improved error output and better messaging when there's no error to show
- Publishing this as a full plugin
- More tests (obviously)