Selenium Accessibility Testing
Der Testlauf findet das namenlose Feld
Filterfeld, Suchfeld, Auswahl: Formularfelder ohne verbundenen Namen.
Browserzustand wird Beleg
Ein belastbarer Lauf prüft den richtigen Moment
Selenium öffnet den Zustand. axe prüft ihn. Die Assertion macht den Befund verbindlich.
- 1Route laden
/suche - 2Zustand öffnen
#filter-toggle - 3Sichtbarkeit abwarten
#filter-panel - 4DOM analysieren
AxeBuilder
Ergebnisse
Der Filterbereich ist geöffnet und sichtbar, bevor axe startet.
span statt labellabel- Regel
label- Auswirkung
- critical
- Fundstelle
#filter- HTML
<input id="filter" …>
Assertion fehlgeschlagen Der Lauf endet mit einem Fehlercode; der Befund kann nicht unbemerkt bleiben.
axe analysiert gerenderten Inhalt im geladenen Zustand. Bleibt der Filter geschlossen, prüft dieser Test den entscheidenden Inhalt nicht.
Die vier Ergebnislisten richtig lesen
Ein leerer violations-Block ist nur ein Ergebnis des ausgeführten Laufs. Die übrigen Listen erklären dessen Reichweite.
violationsautomatisch nicht bestanden- Diese Regeln dürfen die CI-Pipeline scheitern lassen.
nodes[].targetführt zur Fundstelle. incompletemanuell prüfen- axe konnte weder bestanden noch nicht bestanden sicher bestimmen. Behandeln Sie die Einträge als Prüfauftrag.
passesautomatisch bestanden- Die Regel lief für die genannten Elemente und fand in diesem Zustand keinen Verstoß.
inapplicablekein passendes Element- Die Regel lief nicht, weil im gewählten Bereich kein passender Inhalt gefunden wurde.
Aktuelle Pakete festhalten
npm install --save-dev \
selenium-webdriver@4.48.0 \
@axe-core/webdriverjs@4.13.0 Diese Version von selenium-webdriver verlangt Node.js 22 oder neuer. Committen Sie anschließend die Lockdatei. Selenium Manager kümmert sich beim Start um den passenden Browser-Treiber.
Vollständiger WebDriverJS-Test
const assert = require('node:assert/strict');
const { AxeBuilder } = require('@axe-core/webdriverjs');
const { Builder, By, until } = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');
async function testFilter() {
const options = new chrome.Options().addArguments('--headless=new');
const driver = await new Builder()
.forBrowser('chrome')
.setChromeOptions(options)
.build();
try {
await driver.get('https://example.com/suche');
const toggle = await driver.wait(
until.elementLocated(By.id('filter-toggle')), 5000
);
await driver.wait(until.elementIsVisible(toggle), 5000);
await toggle.click();
const panel = await driver.wait(
until.elementLocated(By.id('filter-panel')), 5000
);
await driver.wait(until.elementIsVisible(panel), 5000);
const results = await new AxeBuilder(driver)
.include('#filter-panel')
.withTags(['wcag2a', 'wcag2aa'])
.analyze();
assert.deepEqual(results.violations, []);
} finally {
await driver.quit();
}
}
testFilter();Der Test zeigt die Stelle; die Korrektur bleibt HTML
Der sichtbare Text muss programmatisch mit dem Feld verbunden sein. Danach prüft derselbe Lauf denselben geöffneten Zustand erneut.
<span>Ergebnisse filtern</span>
<input id="filter" type="text"><label for="filter">Ergebnisse filtern</label>
<input id="filter" type="text">Aus dem Prüfbericht
Ein Befund aus dem Lauf
Kritisch Das Filterfeld hat keinen verbundenen Namen Regel label
Der Text daneben gehört technisch nicht zum Feld, deshalb meldet der Lauf die Regel label. Ein label mit for verbindet beide.
Zum Mitnehmen
Das Formularfeld, korrigiert
Zwei Zeilen HTML und ein Testfall, der die Stelle festhält.
Korrektur in 2 Schritten ansehen
Den sichtbaren Text mit dem Feld verbinden
Ein label mit for verbindet den sichtbaren Namen mit dem Feld. Der Text wird zugleich zur Klickfläche für das Feld.
KorrekturvergleichSchritt 1 · HTML Vorher
<span>Ergebnisse filtern</span> <input id="filter" type="text" name="filter">Nachher
<label for="filter">Ergebnisse filtern</label> <input id="filter" type="text" name="filter">Markierte Zeilen wurden geändert
So prüfen Sie es Klicken Sie auf den Text. Springt der Cursor in das Feld, ist die Verbindung da.
Den Befund im Testlauf festhalten
Der Lauf soll nicht nur zählen, sondern scheitern. So bleibt die Korrektur bestehen, wenn das Formular später wächst.
KorrekturvergleichSchritt 2 · JavaScript Vorher
const results = await new AxeBuilder({ driver }).analyze(); console.log(results.violations.length);Nachher
const results = await new AxeBuilder({ driver }).analyze(); assert.deepEqual(results.violations, []);Markierte Zeilen wurden geändert
So prüfen Sie es Starten Sie den Lauf zweimal, vor und nach der Korrektur. Nur der erste endet mit einem Fehler.