Regeln der Barrierefreiheitsprüfung, erklärt

Jeder Befund in einem Reviseberg-Bericht trägt eine Regel-ID – color-contrast, image-alt, keyboard:trap. Jede Regel unten hat eine eigene Seite: was fehlschlägt, wen es betrifft, woran es meist liegt und wie Sie es beheben – mit Code, den wir vor der Veröffentlichung gegen genau diese Prüfung laufen lassen.

Zwei Prüfmodule melden diese Regeln. axe-core ist die Open-Source-Prüfbibliothek, die unser Crawler auf jeder Seite ausführt; ihre Regel-IDs zeigen auch CI-Pipelines und Browser-Erweiterungen an. Der Tastatur-Agent ist unser eigener: Er geht eine Nutzerreise auf Ihrer Website mit echten Tastendrücken durch und meldet, was keine Regelprüfung sehen kann – etwa einen Fokus, den niemand sieht, oder eine Falle, aus der man nicht herauskommt.

Alle Regeln mit eigener Seite und was sie prüfen
RegelProblemWCAGStufePrüfmodul
image-alt Bild ohne Alternativtext 1.1.1 Nicht-Text-Inhalt A axe-core
input-image-alt Bild-Button ohne Alternativtext 1.1.1 Nicht-Text-Inhalt
4.1.2 Name, Rolle, Wert
A axe-core
role-img-alt Element mit role="img" ohne Namen 1.1.1 Nicht-Text-Inhalt A axe-core
svg-img-alt SVG-Grafik ohne Textalternative 1.1.1 Nicht-Text-Inhalt A axe-core
aria-required-children ARIA-Rolle ohne passende Kindelemente 1.3.1 Info und Beziehungen A axe-core
aria-required-parent ARIA-Rolle ohne passendes Elternelement 1.3.1 Info und Beziehungen A axe-core
label Formularfeld ohne Beschriftung 1.3.1 Info und Beziehungen
3.3.2 Beschriftungen oder Anweisungen
4.1.2 Name, Rolle, Wert
A axe-core
list Fehlerhafte Listenstruktur 1.3.1 Info und Beziehungen A axe-core
listitem Listenpunkt ohne Liste 1.3.1 Info und Beziehungen A axe-core
select-name Auswahlliste ohne Beschriftung 1.3.1 Info und Beziehungen
3.3.2 Beschriftungen oder Anweisungen
4.1.2 Name, Rolle, Wert
A axe-core
td-headers-attr Fehlerhafte Tabellen-Zuordnung 1.3.1 Info und Beziehungen A axe-core
autocomplete-valid Ungültiger autocomplete-Wert 1.3.5 Eingabezweck bestimmen AA axe-core
link-in-text-block Link nur durch Farbe erkennbar 1.4.1 Benutzung von Farbe A axe-core
color-contrast Farbkontrast zu gering 1.4.3 Kontrast (Minimum) AA axe-core
meta-viewport Zoom gesperrt 1.4.4 Textgröße ändern AA axe-core
keyboard:unreachable Element per Tastatur nicht erreichbar 2.1.1 Tastatur A Tastatur-Agent
scrollable-region-focusable Scrollbereich per Tastatur nicht erreichbar 2.1.1 Tastatur A axe-core
keyboard:trap Tastaturfalle 2.1.2 Keine Tastaturfalle A Tastatur-Agent
keyboard:skip-link Kein Skip-Link 2.4.1 Blöcke umgehen A Tastatur-Agent
document-title Seitentitel fehlt 2.4.2 Seite mit Titel versehen A axe-core
link-name Link ohne erkennbaren Text 2.4.4 Linkzweck (im Kontext)
4.1.2 Name, Rolle, Wert
A axe-core
keyboard:focus-invisible Fokus auf unsichtbarem Element 2.4.7 Fokus sichtbar AA Tastatur-Agent
keyboard:focus-visible Fokus nicht sichtbar 2.4.7 Fokus sichtbar AA Tastatur-Agent
target-size Klickfläche zu klein 2.5.8 Zielgröße (Minimum) AA axe-core
html-has-lang Seitensprache fehlt 3.1.1 Sprache der Seite A axe-core
html-lang-valid Ungültige Seitensprache 3.1.1 Sprache der Seite A axe-core
valid-lang Ungültige Sprachangabe im Text 3.1.2 Sprache von Teilen AA axe-core
aria-allowed-attr Unzulässiges ARIA-Attribut 4.1.2 Name, Rolle, Wert A axe-core
aria-hidden-focus Fokussierbares Element in aria-hidden 4.1.2 Name, Rolle, Wert A axe-core
aria-input-field-name ARIA-Eingabefeld ohne Namen 4.1.2 Name, Rolle, Wert A axe-core
aria-required-attr Pflicht-ARIA-Attribut fehlt 4.1.2 Name, Rolle, Wert A axe-core
aria-valid-attr-value Ungültiger ARIA-Wert 4.1.2 Name, Rolle, Wert A axe-core
button-name Button ohne erkennbaren Text 4.1.2 Name, Rolle, Wert A axe-core
frame-title iframe ohne Titel 4.1.2 Name, Rolle, Wert A axe-core
input-button-name Eingabe-Button ohne Text 4.1.2 Name, Rolle, Wert A axe-core
nested-interactive Verschachtelte Bedienelemente 4.1.2 Name, Rolle, Wert A axe-core
aria-dialog-name Dialog ohne zugänglichen Namen Best Practice – axe-core
empty-heading Leere Überschrift Best Practice – axe-core
heading-order Überschriftenebene übersprungen Best Practice – axe-core
landmark-one-main Kein Hauptbereich Best Practice – axe-core
page-has-heading-one Keine Überschrift der ersten Ebene Best Practice – axe-core
region Inhalt außerhalb von Landmarks Best Practice – axe-core

Was eine Regel sagen kann – und was nicht

Eine Regel beantwortet eine enge Frage. image-alt findet ein Bild ohne Textalternative; ob IMG_2231.jpg eine gute Beschreibung ist, erkennt sie nicht. Eine bestandene Regel ist deshalb kein erfülltes Erfolgskriterium: Bei den meisten WCAG-Kriterien entscheidet am Ende ein Mensch, und unsere WCAG-2.2-Übersicht sagt zu jedem Kriterium, wie weit automatische Prüfungen kommen.

Einige Regeln sind Best Practice: axe-core ordnet sie keinem WCAG-Erfolgskriterium zu. Sie beschreiben echte Hürden – Inhalt außerhalb von Landmarks, eine übersprungene Überschriftenebene – und Reviseberg meldet sie, aber nie als WCAG-Verstoß und nie in einem Konformitätsbericht.

Diese Regeln auf Ihrer Website prüfen

Sehen Sie, was ein Scan auf Ihrer Website findet

Eine Seite in rund 30 Sekunden, ohne E-Mail. Der vollständige Bericht umfasst bis zu 100 Seiten und einen Tastatur-Durchlauf.