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:
@axe-core/playwright(opens in a new tab) - for pass/fail testing in UI/E2E testsjest-axe(opens in a new tab) - for pass/fail testing at a component level in jsx@axe-core/react(opens in a new tab) - for live developer testing in dev tools
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.
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.