<Meta title="Documentation/Standards/Accessibility/Automated Checks"/>

# Automated Accessibility Checks

To find and fix problems earlier we added automated accessibility checks to our development process. At the moment we run axe core tests as part of out CI build and `eslint-plugin-vuejs-accessibility` for linting checks.

## Axe Core tests
These checks can and will block the build if there are any axe violations. They can be found under `test/accessibility/axe-accessibility.spec.js` for every component.

In order to see if there are any a11y issues, you can either:

- Start storybook locally (`yarn build:storybook` > `yarn storybook:serve-static`)
- run the a11y test (`yarn test-a11y:chrome`)

or on CircleCI, look at your build and see if there are any `.csv` files on the artifact tab, like [here](https://app.circleci.com/pipelines/github/justeat/fozzie-components/4547/workflows/7df6a3be-0284-4838-a21f-7807441907c3/jobs/5998/artifacts).

### Testing rules

Currently our codebase conforms to the WCAG 2.1 AA standard as well as some additional standards as part of the storybook integration.
These rules are defined from our `test/utils/axe-helper.js` file as tags. 
These tags allow us to refine our level of accessibility testing to any specific rule followed by axe.

For more information about the tags we're currently using, you can find the documentation on axe-core tags [here](https://github.com/dequelabs/axe-core/blob/e699939bfd43fcc66b357d0e7329adce6f29cd6b/doc/API.md#axe-core-tags).

And more information about the WCAG rules can be found [here](https://www.w3.org/TR/WCAG21/).

## eslint-plugin-vuejs-accessibility

This runs accessibility checks as part of our ESLint checks. These do not block the build but fire as warnings. You will see them in the console when running a `yarn build` of the component you are working on.