Skip to content
Wiki
Automated Checks
Automated Checks

Automated Checks

The Automated Checks pages are all based on checks that can be found and fixed by automated processes.

These all use the axe-core (opens in a new tab) library to perform the checks, and so all the results are deterministic and can also be linted for and tested for in pipelines.

All this means that the pages in this section don't require too much on how to identify the issue, as the linting and tests should identify the problems quickly enough, and the fixes are usually quite simple.

Linting

One of the most popular eslint-ing packages appears to be eslint-plugin-jsx-a11y (opens in a new tab) which is based on the axe-core (opens in a new tab) library.

Testing

There are a number of testing libraries that can be used to test for accessibility issues, including:

These tools can be incorporated into normal pipelines, or run at separate times, to ensure that the accessibility of the site is maintained.

While these will only be identifying the automated issues, they can be used to ensure that the site is at least at a basic level of accessibility.

Handling the output

The output from the axe-core libraries can be quite verbose, and may be large blobs of JSON to those unfamiliar with the output. Over time, the output should only be showing the newly failing issues, but when introducing to a project it may be overwhelming.

The main thing to look for will be the sets of violations, which will be an array of objects, within which the important information for resolution would be the id and nodes, which in turn will have html and target properties to help identify the failing element.

The other properties are very useful for understanding the issues and getting information on how to fix them, so they shouldn't be outright ignored.

If these are still proving too difficult to understand or find the elements, the Accessibility Insights (opens in a new tab) extension can be used to help identify the issues, as this will use the same tool under the hood, but will give a more user-friendly and visual output to help identify the problem elements. (The exact errors returned may differ depending on the versions used and tags checked.)

Manual Checking

There are some automated tools that can be used while looking at a page to help identify exactly which elements are causing the issues, all still based on axe-core, including the following chrome extensions:

These can be used in conjunction with the automated tests in pipelines that may give a horrific JSON output of the violations, but the tools can be used to give visual aids that highlight the perpetrators.