How do you test accessibility with Cypress?

Automated accessibility checks catch a useful subset of problems: missing labels, invalid ARIA, low contrast in some cases, duplicate IDs and landmark issues. They do not prove the interface is usable with a keyboard or a screen reader, so they complement manual checks rather than replacing them.

import "cypress-axe";

describe("signup accessibility", () => {
  beforeEach(() => {
    cy.visit("/signup");
    cy.injectAxe();
  });

  it("has no detectable violations", () => {
    cy.checkA11y();
  });

  it("reports a violation after an error state", () => {
    cy.get("[data-cy=submit]").click();
    cy.checkA11y("[data-cy=signup-form]");
  });
});

What to add beyond axe

• Tab through the page and confirm focus order and visible focus
• Operate dialogs, menus and forms without a mouse
• Test that errors are announced through a live region
• Check that a modal traps focus and restores it on close
• Verify contrast and that colour is not the only signal

Configure the axe rules you care about rather than ignoring categories wholesale. A small, intentional rule set in CI catches regressions without turning every minor advisory into a hard failure. For component tests, run checkA11y after mounting so the DOM is ready.