Accessibility testing at the unit level

Question

I know there's plenty of tools out there to look at a fully available web page for accessibility issues, but what about for doing earlier unit testing?

The application I'm testing involves Angular and the current unit tests are written using Jest in Typescript.

I've tried out axe-core at the unit level but that is reporting back some false errors due to common page elements being stored elsewhere (e.g. where the language of the page is set). I think part of the problem is due to the Jest tests running in headless Chrome without a proper DOM, which I think axe-core needs...

Has anyone tried out jest-axe? Or is there another tool that might be more useful? I'm ideally looking for something where I can run a series of checks against elements on a page and get accessibility issues reported back.

If there's no suitable tool, I'm thinking the better approach at the unit level would be to focus specifically on certain accessibility tests (e.g. the setting of ARIA attributes) in a manner where you don't use a separate tool to help (e.g. axe)? And then axe comes in later when you have the rendered pages available?

Answer 1

The best approach I have used is to write unit tests for my accessibility requirements along with all other unit tests. I always insist on more accessibility features than WCAG does, and far more than axe tests for. For example, I may insist on my links looking like links and buttons looking like buttons, or on multiple radio buttons always being in a fieldset element with a legend element. I operationalize those requirements and write tests for them.

I have tried cypress-axe and jest-axe. I could not get cypress-axe to run; jest-axe sometimes performed well, but sometimes ignored almost every violation. Even when jest-axe works, it is designed to catch only a small fraction of the violations I want to test for.

Also, unit tests can verify that functions in the model return correct results, which a DOM-based package cannot.