Standard für Barrierefreiheit im Web / WCAG 2.1 AA, Kriterium für Kriterium
WCAG 2.1 AA, Kriterium für Kriterium
WCAG (Web Content Accessibility Guidelines) ist der technische Standard, auf den der European Accessibility Act, EN 301 549 und der US-amerikanische ADA Title II verweisen. Er gliedert sich in vier Prinzipien — Inhalte müssen wahrnehmbar, bedienbar, verständlich und robust sein (POUR) — und drei Konformitätsstufen: A, AA und AAA, jede strenger als die vorherige.
Engine-Abdeckung heute
20
AA-Kriterien im Umfang
19
heute automatisiert
1
brauchen manuelle Prüfung
EN 301 549 V3.2.1 (2021-03) / WCAG 2.1 AA
Standardversion
Beispielbericht
WCAG 2.1 AAVeranschaulichendes Beispiel, keine echten Scan-Daten.
Wahrnehmbar
Informationen und Bedienelemente müssen Nutzern in wahrnehmbarer Form präsentiert werden — Textalternativen, Untertitel, ausreichender Kontrast, anpassbares Layout.
Nicht-Text-Inhalte benötigen eine Textalternative
Bilder, Symbole und andere nicht-textliche Elemente, die Informationen vermitteln, müssen eine Textalternative haben, die ein Screenreader vorlesen kann.
- WCAG
- 1.1.1
- EN 301 549
- 9.1.1.1
- Richtlinie:
- Annex I, Section III(b)(vi)
Struktur muss im Markup stehen, nicht nur visuell
Überschriften, Listen, Tabellen und Formulargruppierungen, die visuell strukturiert aussehen, müssen auch korrekt ausgezeichnet sein, damit assistive Technologien dieselbe Struktur vermitteln.
- WCAG
- 1.3.1
- EN 301 549
- 9.1.3.1
- Richtlinie:
- Annex I, Section III(c)
Gängige Eingabefelder sollten ihren Zweck angeben
Felder, die gängige Informationen erfassen (Name, Adresse, Zahlungsdaten), sollten den korrekten `autocomplete`-Wert verwenden, damit Browser und assistive Technologien ihren Zweck erkennen können.
- WCAG
- 1.3.5
- EN 301 549
- 9.1.3.5
- Richtlinie:
- Annex I, Section IV(g)(ii)
Farbe nicht als einziges Signal verwenden
Informationen, die nur durch Farbe vermittelt werden (z. B. ein Link, der sich nur durch seine Farbe unterscheidet), sind für farbenblinde Nutzer und bei monochromen oder Kontrast-Anzeigen nicht erkennbar.
- WCAG
- 1.4.1
- EN 301 549
- 9.1.4.1
- Richtlinie:
- Annex I, Section III(c)
Automatisch abspielendes Audio braucht eine Stopp-Möglichkeit
Audio, das länger als 3 Sekunden automatisch abgespielt wird, muss pausierbar, stoppbar sein oder unabhängig in der Lautstärke regelbar sein.
- WCAG
- 1.4.2
- EN 301 549
- 9.1.4.2
- Richtlinie:
- Annex I, Section III(c)
Text benötigt ausreichenden Kontrast zum Hintergrund
Normaler Text benötigt ein Kontrastverhältnis von mindestens 4,5:1 zum Hintergrund; großer Text (≥18,66px normal oder ≥14px fett) benötigt mindestens 3:1.
- WCAG
- 1.4.3
- EN 301 549
- 9.1.4.3
- Richtlinie:
- Annex I, Section III(b)(v)
Text muss bei 200 % Zoom nutzbar bleiben
Beim Zoomen der Seite auf 200 % dürfen Inhalte nicht abgeschnitten, überlappt oder verborgen werden — das Layout sollte sich neu anordnen.
- WCAG
- 1.4.4
- EN 301 549
- 9.1.4.4
- Richtlinie:
- Annex I, Section III(b)(v)
Bedienbar
Bedienelemente und Navigation müssen bedienbar sein, auch allein über die Tastatur, mit ausreichend Zeit und ohne Inhalte, die Anfälle auslösen.
Alles muss allein mit der Tastatur funktionieren
Alle interaktiven Funktionen müssen per Tastatur bedienbar sein — keine reinen Maus-Interaktionen, keine Tastaturfallen.
- WCAG
- 2.1.1
- EN 301 549
- 9.2.1.1
- Richtlinie:
- Annex I, Section III(c)
Zeitlimits müssen anpassbar sein
Nutzer müssen jedes Zeitlimit vor Ablauf abschalten, anpassen oder verlängern können.
- WCAG
- 2.2.1
- EN 301 549
- 9.2.2.1
- Richtlinie:
- Annex I, Section III(c)
Bewegte oder blinkende Inhalte benötigen eine Pause-Funktion
Automatisch aktualisierende, scrollende oder blinkende Inhalte, die länger als 5 Sekunden laufen, müssen pausierbar, stoppbar oder ausblendbar sein.
- WCAG
- 2.2.2
- EN 301 549
- 9.2.2.2
- Richtlinie:
- Annex I, Section III(c)
Möglichkeit zum Überspringen wiederholter Navigation bereitstellen
Seiten mit wiederkehrenden Inhaltsblöcken (Navigationsmenüs, Kopfzeilen) benötigen einen Mechanismus, um diese zu überspringen.
- WCAG
- 2.4.1
- EN 301 549
- 9.2.4.1
- Richtlinie:
- Annex I, Section III(c)
Jede Seite benötigt einen aussagekräftigen Titel
Jede Seite muss ein nicht leeres `<title>`-Element haben, das ihren Inhalt oder Zweck beschreibt.
- WCAG
- 2.4.2
- EN 301 549
- 9.2.4.2
- Richtlinie:
- Annex I, Section III(c)
Links benötigen aussagekräftigen Text
Der zugängliche Name eines Links (Text oder umgebender Kontext) muss beschreiben, wohin er führt oder was er tut.
- WCAG
- 2.4.4
- EN 301 549
- 9.2.4.4
- Richtlinie:
- Annex I, Section III(c)
Der Tastaturfokus muss sichtbar sein
Das Element, das aktuell den Tastaturfokus hat, muss eine sichtbare Kennzeichnung haben (z. B. eine Umrandung).
- WCAG
- 2.4.7
- EN 301 549
- 9.2.4.7
- Richtlinie:
- Annex I, Section III(c)
Verständlich
Informationen und die Bedienung der Oberfläche müssen verständlich sein — lesbarer Text, vorhersehbares Verhalten, Hilfe beim Vermeiden und Korrigieren von Fehlern.
Die Sprache der Seite muss deklariert sein
Das `<html>`-Element benötigt ein gültiges `lang`-Attribut, das die Hauptsprache der Seite angibt.
- WCAG
- 3.1.1
- EN 301 549
- 9.3.1.1
- Richtlinie:
- Annex I, Section III(c)
Sprachwechsel innerhalb einer Seite müssen markiert sein
Textabschnitte in einer anderen Sprache als der umgebende Inhalt benötigen ein `lang`-Attribut mit gültigem Sprachcode.
- WCAG
- 3.1.2
- EN 301 549
- 9.3.1.2
- Richtlinie:
- Annex I, Section III(c)
Formularfehler müssen textlich identifiziert werden
Schlägt eine Formularvalidierung fehl, muss der konkrete Fehler textlich beschrieben werden — nicht nur durch Farbe oder ein Symbol.
- WCAG
- 3.3.1
- EN 301 549
- 9.3.3.1
- Richtlinie:
- Annex I, Section IV(g)(ii)
Formularfelder benötigen Beschriftungen oder Anweisungen
Jedes Eingabefeld benötigt eine sichtbare Beschriftung oder Anweisung, die beschreibt, was erwartet wird, programmatisch mit dem Feld verknüpft.
- WCAG
- 3.3.2
- EN 301 549
- 9.3.3.2
- Richtlinie:
- Annex I, Section IV(g)(ii)
Robust
Inhalte müssen robust genug sein, um von aktuellen und zukünftigen assistiven Technologien wie Screenreadern zuverlässig interpretiert zu werden.
Markup muss wohlgeformt sein
HTML muss so gültig sein, dass assistive Technologien es zuverlässig verarbeiten können — am häufigsten betrifft dies doppelte `id`-Attribute.
- WCAG
- 4.1.1
- EN 301 549
- 9.4.1.1
- Richtlinie:
- Annex I, Section III(c)
Interaktive Elemente benötigen programmatischen Namen, Rolle und Zustand
Benutzerdefinierte Steuerelemente und ARIA-Widgets müssen einen korrekten Namen, eine Rolle und einen Zustand über das Markup bereitstellen, damit assistive Technologien sie ankündigen und bedienen können.
- WCAG
- 4.1.2
- EN 301 549
- 9.4.1.2
- Richtlinie:
- Annex I, Section III(c)
Sehen Sie, wogegen Ihre eigene Website tatsächlich verstößt
Starten Sie einen kostenlosen Scan und erhalten Sie einen echten Bericht, zugeordnet zu genau diesen Kriterien — keine generische Checkliste.
Website kostenlos prüfen