jsx-a11y und Prüfungen auf Komponentenebene
Erkennen Sie Probleme mit Lint-Regeln in Ihrer Codebasis.
jsx-a11y und Prüfungen auf Komponentenebene ist eine kostenlose Web Accessibility Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Web Accessibility Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Fangen Sie Fehler ab, bevor sie ausgeliefert werden
Viele Barrierefreiheitsfehler sind im Code leicht zu erkennen. Ein Linter kann sie bereits beim Tippen melden, lange bevor ein echter Benutzer auf das Hindernis stößt. 🛡️
jsx-a11y kennenlernen
Das Paket eslint-plugin-jsx-a11y ergänzt ESLint um Barrierefreiheitsregeln für JSX. Es prüft Ihre Komponenten auf häufige, bekannte a11y-Fehler.
npm install eslint-plugin-jsx-a11y --save-devDie empfohlenen Regeln aktivieren
Erweitern Sie die recommended-Konfiguration des Plugins, um gleichzeitig eine solide Grundauswahl an Regeln zu aktivieren, anstatt jede Regel einzeln einzuschalten.
extends: ['plugin:jsx-a11y/recommended']Regeln für Alternativtexte
Das Plugin warnt, wenn ein img-Element kein alt-Attribut besitzt. Diese einzelne Regel verhindert einen sehr häufigen und folgenreichen Barrierefreiheitsfehler.
<img src="logo.png" alt="Acme logo" />Klicks auf statischen Elementen erkennen
Wenn Sie onClick ohne Tastaturunterstützung auf ein div setzen, wird eine Warnung ausgelöst. Verwenden Sie stattdessen ein echtes button-Element, das fokussierbar und für die Tastatur geeignet ist.
Prüfungen der Label-Zuordnung
Die Regeln prüfen, ob Formularsteuerelemente ein zugehöriges label besitzen. Ein Feld ohne Label wird gemeldet, damit es Benutzer niemals ohne Bezeichnung erreicht.
Nur gültiges ARIA
Das Plugin prüft, ob ARIA-Attribute und Rollen gültig und korrekt verwendet werden. Tippfehler wie aria-lable oder ungültige Rollen werden sofort erkannt.
Linter haben Grenzen
Ein Linter sieht nur Ihren statischen Code. Er kann nicht beurteilen, ob Ihr alt-Text aussagekräftig ist oder ob die Fokusreihenfolge sinnvoll ist. Manuelle Tests bleiben daher wichtig.
Barrierefreie Komponenten entwickeln
Integrieren Sie Barrierefreiheit in gemeinsam genutzte Komponenten. Ein wiederverwendbares Button-Element, das stets ein echtes button-Element rendert, sorgt in der gesamten App für gutes Verhalten.
In CI als Voraussetzung durchsetzen
Führen Sie ESLint in Ihrer Pipeline aus, sodass a11y-Warnungen den Build fehlschlagen lassen. Dadurch gelangen Regressionen nicht unbemerkt durch das Code-Review in die Produktion.
Direktes Feedback im Editor
Mit der ESLint-Editor-Erweiterung erscheinen Warnungen direkt in Ihrem Code. Dieses schnelle Feedback vermittelt dem Team Barrierefreiheitsmuster schon beim Schreiben.
Kurztest
Ihr Team fügt eslint-plugin-jsx-a11y zum Projekt hinzu. Was sollten Sie trotzdem nicht von diesem Plugin erwarten?
Zusammenfassung: Leitplanken im Code
Verwenden Sie jsx-a11y, um häufige Fehler zu erkennen, barrierefreie gemeinsam genutzte Komponenten zu entwickeln und die Prüfung in CI durchzusetzen. Für alles Weitere sind weiterhin manuelle Tests erforderlich. ✅
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 30
- Lektionen
- 120
Häufig gestellte Fragen
Ist die Lektion „jsx-a11y und Prüfungen auf Komponentenebene“ kostenlos?
Ja — der vollständige Text von „jsx-a11y und Prüfungen auf Komponentenebene“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Web Accessibility Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „jsx-a11y und Prüfungen auf Komponentenebene“?
Erkennen Sie Probleme mit Lint-Regeln in Ihrer Codebasis. Du übst Web Accessibility Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Web Accessibility Academy zu starten?
Keine Vorkenntnisse erforderlich. Web Accessibility Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „jsx-a11y und Prüfungen auf Komponentenebene“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Web Accessibility Academy-Lektion Code schreiben und ausführen?
Ja. Jede Web Accessibility Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Routenwechsel ohne Neuladen der Seite
- Fokus mit Refs und useEffect verwalten
- Fragments, Portals und die Falle der DOM-Reihenfolge
- jsx-a11y und Prüfungen auf Komponentenebene