React Accessibility Checker
Was der Prüfer im JSX findet
Feldnamen, Icon-Buttons, doppelte IDs: drei Befunde in Komponenten.
React-Prüfstrategie
Prüfen Sie den Zustand, nicht nur die Komponente
Ein Checker ist keine einzelne Bibliothek. Er verbindet statische JSX-Regeln mit echten Browserzuständen und einer kurzen manuellen Prüfung.
Jeder neue UI-Zustand ist ein neuer Prüfpunkt
Grundzustand
- LintLabel-Verbindungprüfbar
- AxeName und IDprüfbar
- ManuellFokus sichtbaroffen
Fehler sichtbar
- LintQuellcodebegrenzt
- Axe
aria-describedbyprüfbar - ManuellFehleransageoffen
Vorschläge offen
- LintRollen im JSXteilweise
- Axesichtbarer Dialogprüfbar
- ManuellPfeiltastenoffen
Ergebnis geladen
- LintLive-Regionbegrenzt
- Axefertiger DOMprüfbar
- ManuellÄnderung bemerktoffen
Instanzsichere Beziehungen
useId verbindet Name, Feld und Hinweis
Eine feste ID kollidiert, sobald dieselbe Komponente zweimal erscheint. Ein gemeinsamer Präfix aus useId() hält alle Verweise innerhalb der Instanz zusammen.
Nicht verwenden für: Listenschlüssel oder IDs aus Ihren Fachdaten.
aria-describedby={hintId} führt vom Feld zum Hinweis zurück.
Zwei automatische Netze
Kopierbarer Start für Lint und Browser-Test
Der Linter läuft bei jeder Änderung. Der Browser-Test prüft, was React tatsächlich rendert.
import jsxA11y from 'eslint-plugin-jsx-a11y';
export default [
{
files: ['src/**/*.{js,jsx}'],
...jsxA11y.flatConfigs.recommended,
},
];Eigene Komponenten brauchen gegebenenfalls ein Mapping auf ihr gerendertes HTML-Element. Der Linter kann Laufzeitzustände und ID-Kollisionen im fertigen Dokument nicht sehen.
import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';
async function expectNoAxeFindings(page) {
const result = await new AxeBuilder({ page }).analyze();
expect(result.violations).toEqual([]);
}
test('Suche: Start und Fehler', async ({ page }) => {
await page.goto('/suche');
await expectNoAxeFindings(page);
await page.getByRole('button', { name: 'Suchen' }).click();
await expect(page.getByText('Suchbegriff fehlt')).toBeVisible();
await expectNoAxeFindings(page);
}); Für Vorschlagsliste, Dialog und Erfolg schreiben Sie eigene Zustandswege. Ein grüner Scan gilt nur für den DOM, der im Moment von analyze() sichtbar ist.
Grenze der Automatik
Ein leerer Befundbericht ist der Beginn der Prüfung
Aus dem Prüfbericht
Drei Stellen, drei Befunde
Kritisch Eingabefelder ohne verbundenes Label Regel label
In JSX heißt das Attribut htmlFor. Fehlt es, bleibt das Feld namenlos, auch wenn der Text daneben steht.
Kritisch Icon-Buttons ohne Namen Regel button-name
Ein Button mit reinem SVG-Kind hat keinen Text. aria-label an der Komponente nennt die Aktion.
Prüfen Doppelte IDs aus wiederverwendeten Komponenten Regel duplicate-id-aria
Steht dieselbe Komponente zweimal auf der Seite, kollidieren ihre festen IDs. useId erzeugt eindeutige Werte.
Zum Mitnehmen
Die React-Komponente, korrigiert
htmlFor statt for, ein Name am Icon-Button, useId gegen Kollisionen.
Korrektur in 3 Schritten ansehen
Label und Feld mit useId verbinden
useId erzeugt je Instanz eine eigene ID. Das Feld behält seinen Namen, auch wenn die Komponente mehrfach gerendert wird.
KorrekturvergleichSchritt 1 · JavaScript Vorher
function Suchfeld() { return ( <> <span>Suchbegriff</span> <input id="suche" type="search" /> </> ); }Nachher
function Suchfeld() { const id = useId(); return ( <> <label htmlFor={id}>Suchbegriff</label> <input id={id} type="search" /> </> ); }Markierte Zeilen wurden geändert
So prüfen Sie es Rendern Sie die Komponente zweimal und klicken Sie auf das zweite Label. Der Fokus springt in das zweite Feld.
Dem Icon-Button einen Namen geben
Das Symbol bleibt für Vorleseprogramme ausgeblendet. aria-label liefert das Wort, das vorgelesen wird.
KorrekturvergleichSchritt 2 · JavaScript Vorher
<button type="button" onClick={loeschen}> <TrashIcon aria-hidden="true" /> </button>Nachher
<button type="button" onClick={loeschen} aria-label="Eintrag löschen"> <TrashIcon aria-hidden="true" /> </button>Markierte Zeilen wurden geändert
So prüfen Sie es Fahren Sie mit der Tab-Taste auf das Symbol. Ein Vorleseprogramm sagt „Eintrag löschen, Schaltfläche“.
Doppelte IDs in ARIA-Verweisen auflösen
Feste IDs kollidieren, sobald die Komponente zweimal auf der Seite steht. aria-describedby verweist dann auf den falschen Text.
KorrekturvergleichSchritt 3 · JavaScript Vorher
<input aria-describedby="hinweis" /> <p id="hinweis">Mindestens acht Zeichen.</p>Nachher
<input aria-describedby={`${id}-hinweis`} /> <p id={`${id}-hinweis`}>Mindestens acht Zeichen.</p>Markierte Zeilen wurden geändert
So prüfen Sie es Suchen Sie im veröffentlichten HTML nach der ID. Sie kommt genau einmal vor.