Getting Started

Intro

The @level-ci/a11y-puppeteer package is an NPM module designed to help you perform accessibility testing on your web pages.
With it, you can run static page analysis and generate detailed reports of accessibility violations based on WCAG guidelines and ACT rules.


// e2e/accessibility.test.js
 
const puppeteer = require('puppeteer')
 
const { levelAnalyze } = require('@level-ci/a11y-puppeteer')
 
;(async () => {
  const browser = await puppeteer.launch({ headless: false })
  const page = await browser.newPage()
 
  await page.goto('https://www.google.com')
  await levelAnalyze(page)
  await browser.close()
})()

Prerequisites

Puppeteer version 20.7.4 or higher

Distribution

Level CI App Puppeteer is distributed as a zip-packaged NPM module and should be installed as a project dependency.

Installation

Extract the provided level-ci-puppeteer-app.zip into a separate directory, e.g., src/packages:


src
└── packages
    ├── level-ci-puppeteer-app.zip
    └── level-ci-puppeteer-app

Install with npm:


npm install src/packages/level-ci-puppeteer-app

This will add @level-ci/a11y-puppeteer to your project dependencies in package.json.

Setup

Level CI App Puppeteer is an external package that must be imported in your Puppeteer scripts.

Import @level-ci/a11y-puppeteer and call the levelAnalyze function:


const { levelAnalyze } = require('@level-ci/a11y-puppeteer')
 
;(async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.goto('https://www.google.com')
  await levelAnalyze(page)
  await browser.close()
})()

TypeScript Support

If you are using TypeScript, add @level-ci/a11y-puppeteer to the types section in your tsconfig.json:


{
  "compilerOptions": {
    "types": ["puppeteer", "@level-ci/a11y-puppeteer"]
  }
}

If you are not using TypeScript, you can still enable autocompletion by adding type references at the top of your test files:


/// <reference types="puppeteer" />
 
/// <reference types="@level-ci/a11y-puppeteer" />