Skip to main content

Cypress Accessibility + Add-on

Instantly visualize, triage, and fix accessibility violations without any additional code or configuration. Dive deep into each violation with live, fully-rendered DOM snapshots of your application as it appeared during your tests. Track your team's progress over time with historical scores to monitor improvements and identify regressions. Looking for a general guide for Accessibility testing in Cypress App? Go here.

Request trial ➜ See a demo Explore an example project
A graphic showing the Cypress Accessibility dashboard including list of rules, views, and the user interface showing how devtools can be used

Get Started​

You don't need to make any changes to your code or your test setup. If you record test runs to the Cypress Cloud with Test Replay, you're ready to start using Cypress Accessibility. You'll start your free trial with personalized support from our sales team and your existing test data to instantly see full accessibility reports for all your Cypress projects. From there, you can integrate with CI to set your own standards for handling the results.

Get started with Cypress Accessibility ➜

How it Works​

Cypress Accessibility provides organized, visual, and actionable accessibility reports, based completely on the tests you record to Cypress Cloud, and powered by Axe Core® by Deque Systems. This is the documentation page for that product. To learn about the general topic of accessibility testing using the Cypress App, see our guide on this topic.

Cypress Accessibility generates a sortable, filterable report, to see scores and violation counts by page/component, or a combined rule-based report for the entire run. It also includes a drill-in view with live DOM snapshots highlighting each issue detected.

caution

Cypress Accessibility generates reports using Cypress Test Replay data and requires Cypress v13+.

Cypress Cloud generates an accessibility report for each unique state reached during your tests on a given Cypress run. This includes pages visited in end-to-end tests, as well as individual components rendered in component tests, and any states or pages that were encountered as a result of interactions performed during test execution.

All of these page or component states are detected using the same protocol that powers Test Replay, meaning no additional code or setup is needed anywhere in your tests.

These individual accessibility "snapshots" are grouped into page- or component-level reports (called "Views"), and also form the bases of a unified report covering the entire run. This gives you multiple ways to examine your report - by focusing on the most important parts of your application, or by

Reports are generated using the industry-standard open source Axe Core® library created by Deque Systems, with a default configuration focused on the Web Content Accessibility Guidelines (WCAG) 2.1.

Highlights​

  • All steps of all user flows tested in Cypress are captured automatically
  • Server-side execution means no disruption to existing test code or practices, and no performance impact from accessibility checks
  • Reports are generated at the page or component level, as well as a combined report showing the outcome of all accessibility rules checked in the run
  • Debuggable full-page DOM snapshots with highlights are provided for every violation
  • Most iframe and Shadow DOM uses cases are supported out-of-the-box
  • The Results API allows you to own how your CI pipeline reacts to the accessibility results of the run to implement a policy
  • "Ignored" elements are isolated and don't affect your score, but can still be reviewed

Note: DEQUE, DEQUELABS, AXE®, and AXE-CORE® are trademarks of Deque Systems, Inc. in the US and other countries. These terms are used throughout our documentation to refer to the accessibility testing library used by Cypress Accessibility.

Contents