Cypress Accessibility Testing
Nach jeder Aktion neu prüfen
Buttons, Links, Felder, ARIA-Zustände: der Test folgt dem Bedienweg.
Testlauf als Bedienweg
Axe sieht immer nur den aktuellen Zustand
Öffnen, prüfen, weiterbedienen: jeder neue DOM-Zustand braucht seinen eigenen Blick.
Cypress15.21.1
cypress-axe1.7.0
axe-core4.13.0
Kompatibel gepinnt · Stand September 2026cy.visit()Seite ladency.injectAxe()axe einfügency.checkA11y()Seite geschlossen.click()Panel öffnency.checkA11y()Seite geöffnetCypress-Befehlslog
- ✓
visit /suche - ✓
injectAxe - ✓
checkA11y - ✓
click [data-open] - ×
checkA11y
Schließen-Symbol ohne zugänglichen Namen
Das Panel ist jetzt Teil des DOM-Zustands.
Filter× Name fehlt
axe prüft diesen geöffneten Zustand
Einmal einrichten
Terminal
npm install --save-dev \
cypress@15.21.1 \
cypress-axe@1.7.0 \
axe-core@4.13.0cypress/support/e2e.js
import 'cypress-axe'; Der Import registriert injectAxe und checkA11y für alle Spezifikationen. injectAxe steht nach jedem neuen visit.
Den Zustand und den Tastaturweg prüfen
cypress/e2e/suche.cy.js
describe('Suche', () => {
beforeEach(() => {
cy.visit('/suche');
cy.injectAxe();
});
it('prüft das geöffnete Filterpanel', () => {
cy.checkA11y();
cy.get('[data-open]').click();
cy.get('[data-panel]').should('be.visible');
cy.checkA11y();
});
it('prüft den Fokusweg im Panel', () => {
cy.get('[data-open]').focus();
cy.press(Cypress.Keyboard.Keys.ENTER);
cy.get('[data-close]').should('have.focus');
cy.press(Cypress.Keyboard.Keys.TAB);
cy.get('[data-search]').should('have.focus');
});
});So prüfen Sie die Einrichtung
- Runner starten
npx cypress open - Spezifikation wählen
suche.cy.js - Panel beobachtenBeide
checkA11y-Aufrufe erscheinen. - Fehler behebenDanach bleibt derselbe Bedienweg grün.
Weiterarbeiten mit den Originalquellen
Cypress: Accessibility Testingcypress-axe: Befehle und InstallationCypress: cy.press()
Aus dem Prüfbericht
Fünf Regeln auf einem Bedienweg
Kritisch Das Schließen-Symbol im Dialog Regel button-name
Der Button trägt nur ein Symbol, sein Name fehlt. Ein aria-label gibt ihm einen Namen, und der nächste Testlauf meldet ihn nicht mehr.
Kritisch Links, die erst nach einem Klick erscheinen Regel link-name
cypress-axe prüft nur den aktuellen Zustand der Seite. Führen Sie checkA11y nach jeder Aktion erneut aus, sonst bleiben leere Links unentdeckt.
Kritisch Das Suchfeld im geöffneten Panel Regel label
Ein Feld ohne verbundenes label fällt im Testlauf auf. label mit for verbindet den sichtbaren Text mit dem Feld.
Kritisch Der Aufklappzustand am Menü-Button Regel aria-valid-attr-value
Erlaubt sind nur true und false. Ein Wert wie „maybe“ fällt im Testlauf auf und wird durch den echten Zustand ersetzt.
Kritisch Ein Link im Button der Trefferliste Regel nested-interactive
Verschachtelte Bedienelemente meldet axe zuverlässig. Trennen Sie Link und Schaltfläche, dann prüft cy.press() beide als eigene Tabstopps.
Zum Mitnehmen
Der Testlauf, korrigiert
Erst nach jeder Aktion prüfen, dann den Tastaturweg.
Korrektur in 3 Schritten ansehen
Nach jeder Aktion erneut prüfen
cypress-axe prüft die Seite zum Zeitpunkt des Aufrufs. Was ein Klick einblendet, sehen Sie nur mit einem zweiten Lauf.
KorrekturvergleichSchritt 1 · JavaScript Vorher
cy.visit('/suche'); cy.injectAxe(); cy.checkA11y(); cy.get('[data-open]').click();Nachher
cy.visit('/suche'); cy.injectAxe(); cy.checkA11y(); cy.get('[data-open]').click(); cy.checkA11y();Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie das Panel im Testlauf. Der Bericht führt jetzt auch dessen Felder auf.
Den Tabweg mit cy.press prüfen
focus() setzt den Fokus selbst und beweist nichts. cy.press() löst einen echten Tab-Wechsel aus und zeigt das nächste erreichbare Element.
KorrekturvergleichSchritt 2 · JavaScript Vorher
cy.get('[data-close]').focus(); cy.focused().should('have.attr', 'data-close');Nachher
cy.get('[data-open]').focus(); cy.press(Cypress.Keyboard.Keys.TAB); cy.focused().should('have.attr', 'data-close');Markierte Zeilen wurden geändert
So prüfen Sie es Sehen Sie sich den Testlauf an. Der Fokus wandert Schritt für Schritt weiter.
Dem Schließen-Symbol einen Namen geben
Das Symbol ist für Vorleseprogramme verborgen. aria-label liefert den Namen, den der Testlauf und die Bedienung brauchen.
KorrekturvergleichSchritt 3 · HTML Vorher
<button data-close> <svg aria-hidden="true"><use href="#icon-x"></use></svg> </button>Nachher
<button data-close aria-label="Dialog schließen"> <svg aria-hidden="true"><use href="#icon-x"></use></svg> </button>Markierte Zeilen wurden geändert
So prüfen Sie es Tabben Sie auf das Symbol. Ein Vorleseprogramm sagt „Dialog schließen, Schaltfläche“.