Getting Started

Prerequisites

Before you start using the Accessibility Code Checker, you need to have a working browser automation testing setup. The Accessibility Code Checker has been tested on some of the most common frameworks, but it should be possible to use it in any tool where a page is rendered in a browser. We currently provide guides for the following frameworks:

Playwright
Puppeteer
Selenium
Cypress

Module System

Alfa, the rules engine of the Accessibility Code Checker, is distributed as ESM (ECMAScript Modules). Thus, projects using the old CJS (CommonJS) format (using require) for modules won't be able to use it directly. There are essentially four ways to handle this:

Switch the full project to ESM. This is likely the most future-proof solution, but also the one requiring most work upfront. Hence it might not be the best solution for all projects, but it is probably a good solution for new projects. Check this quick overview of the required steps to get an idea of the required work.
Use dynamic import(). That is, replace all
```
import { Foo } from "@siteimprove/alfa-foo";
```
with
```
const { Foo } = await import("@siteimprove/alfa-foo");
```
and move them inside the async function which is also calling Alfa. This is a quick solution but might be cumbersome to maintain.
Use ESM files for the part of the project that uses Alfa. This is done easily by using the .mts or .mjs extension on the files. This is relatively quick but implies that the part of the project using Alfa will be isolated from the rest.
Use an ESM-for-CJS loader such as the esm package. This solution has not been tested, but it should work.

Previous: Introduction Next: Installation