Bilder, die nur der Gestaltung dienen (z. B. Muster oder Icons ohne Bedeutung), sollten für Screenreader unsichtbar sein. So bleibt der Fokus auf den wichtigen Inhalten – ohne unnötige Ablenkung.
Barrierefreiheit WCAG Checkliste
Verwende diese interaktive Checkliste, um sicherzustellen, dass deine Website die wichtigsten Barrierefreiheitsanforderungen erfüllt.
Diese Checkliste ist ein Hilfsmittel und keine vollständige WCAG-Konformitätsprüfung.
Keine Ergebnisse gefunden
Setze deine Filter zurück oder versuche eine neue Eingabe.
Grafiken
- WCAG A
WCAG Kriterium: 1.1.1 Nicht-Text-Inhalte
Bilder müssen mit einem kurzen Text erklärt werden, damit auch Menschen mit Sehbehinderungen verstehen, was darauf zu sehen ist. Das passiert über sogenannte Alt-Texte, die Screenreader vorlesen können.
- wahrnehmbar
- Redaktion
Lernartikel über dieses Thema: - WCAG A
WCAG Kriterium: 1.1.1 Nicht-Text-Inhalte
- wahrnehmbar
- Entwicklung
- Redaktion
Lernartikel über dieses Thema: - WCAG A
WCAG Kriterium: 1.1.1 Nicht-Text-Inhalte
Bilder mit einer Funktion – etwa Icons als Buttons oder Links – brauchen eine verständliche Textbeschreibung, damit Screenreader-Nutzer wissen, was sie auslösen
- wahrnehmbar
- Entwicklung
- Redaktion
Lernartikel über dieses Thema: - WCAG A
WCAG Kriterium: 1.1.1 Nicht-Text-Inhalte
Diagramme und Infografiken erhalten mehrstufige Beschreibungen: Kurzer Alt-Text für den Zweck, erweiterte Beschreibung für Trends/Erkenntnisse und Rohdaten als Tabelle oder Liste für Screen Reader-Nutzer.
- wahrnehmbar
- Entwicklung
- Redaktion
Lernartikel über dieses Thema: - WCAG AA
WCAG Kriterium: 1.4.5 Bilder von Text
Texte sind programmatisch verfügbar, nicht in Grafiken eingebettet. Ausnahmen: Logos, Markenzeichen oder dekorative Schriftzüge.
- wahrnehmbar
- Design
- Entwicklung
- Redaktion
Lernartikel über dieses Thema:
Farben & Kontraste
- WCAG AA
WCAG Kriterium: 1.4.11 Nicht-Text-Kontrast
Tab-Navigation zeigt deutlich das aktive Element durch kontrastreiche Umrandung (mindestens 3:1 Verhältnis).
- wahrnehmbar
- Design
- Entwicklung
Lernartikel über dieses Thema: - WCAG A
WCAG Kriterium: 1.4.1 Verwendung von Farbe
Wichtige Informationen werden nicht ausschließlich durch Farbe übermittelt. Achte darauf, dass Hinweise immer auch durch Symbole, Muster, Text oder Beschriftungen sichtbar sind.
- wahrnehmbar
- Design
Lernartikel über dieses Thema: - WCAG AA
WCAG Kriterium: 1.4.11 Nicht-Text-Kontrast
Eingabefelder, Checkboxen, Radio-Buttons und deren Umrandung oder Flächen weisen ausreichenden Kontrast zur Umgebung auf.
- wahrnehmbar
- Design
- Entwicklung
- WCAG AA
WCAG Kriterium: 1.4.11 Nicht-Text-Kontrast
Wichtige, sinntragende Icons oder Symbole müssen sich deutlich vom Hintergrund abheben – der Kontrast sollte mindestens 3:1 betragen.
- wahrnehmbar
- Design
Lernartikel über dieses Thema: - WCAG AA
WCAG Kriterium: 1.4.3 Kontrast (Minimum)
Farbkontrast: Mindestens 4,5:1 für normalen Fließtext (unter 18pt normal oder unter 14pt fett), mindestens 3:1 für großen Text (ab 18pt normal oder ab 14pt fett).
- wahrnehmbar
- Design
Lernartikel über dieses Thema:
Text & Sprache
- WCAG AA
WCAG Kriterium: 1.4.12 Textabstand
Text funktioniert auch bei vergrößerten Abständen (z.B. durch Browser-Erweiterungen für bessere Lesbarkeit).
- wahrnehmbar
- Entwicklung
- WCAG AA
WCAG Kriterium: 3.1.2 Sprache von Teilen
Wenn sich die Sprache eines Wortes oder Absatzes ändert (z. B. ein englischer Begriff in einem deutschen Text), sollte das im Code gekennzeichnet sein. So kann der Screenreader die Aussprache korrekt anpassen.
- Verständlich
- Entwicklung
- Redaktion
Lernartikel über dieses Thema: - WCAG A
WCAG Kriterium: 2.4.2 Seite mit Titel versehen
Jede Seite hat einen eindeutigen und beschreibenden Titel im <title>-Tag.
- Verständlich
- Entwicklung
- Redaktion
Lernartikel über dieses Thema: - WCAG A
WCAG Kriterium: 1.3.1 Info und Zusammenhang
Überschriften folgen einer logischen Hierarchie (H1, H2, H3…) ohne Ebenen zu überspringen.
- Verständlich
- Entwicklung
- Redaktion
Lernartikel über dieses Thema: - WCAG A
WCAG Kriterium: 3.1.1 Sprache der Seite
Die Hauptsprache der Seite (z. B. Deutsch) muss im HTML-Code definiert sein. Das geschieht über das
lang-Attribut am<html>-Element. Nur so wissen Screenreader, wie sie den Inhalt korrekt aussprechen sollen.- Verständlich
- Entwicklung
Lernartikel über dieses Thema: - WCAG AA
WCAG Kriterium: 1.4.4 Textgröße ändern
Auch bei einer Vergrößerung auf 200 % bleiben alle Inhalte vollständig bedienbar und lesbar.
- wahrnehmbar
- Entwicklung
- Redaktion
Lernartikel über dieses Thema:
Links und Interaktionen
- WCAG A
WCAG Kriterium: 2.5.3 Label im Namen
Menschen mit Behinderungen nutzen oft Sprachbefehle wie „Klicke auf Speichern“. Dafür muss der sichtbare Button-Text auch im Code verfügbar sein, damit die Sprachsteuerung funktioniert.
- Bedienbar
- Entwicklung
- Redaktion
- WCAG A
WCAG Kriterium: 2.5.2 Zeigeraufhebung
Wenn jemand aus Versehen auf einen Button drückt, kann er den Finger wegziehen ohne dass etwas passiert. Die Aktion wird erst ausgelöst, wenn man loslässt – nicht schon beim ersten Berühren.
- Bedienbar
- Entwicklung
- WCAG AA
WCAG Kriterium: 1.4.13 Inhalt bei Hover oder Fokus
Wenn sich Tooltips oder Infofenster öffnen (beim Drüberfahren mit der Maus), müssen Nutzer sie wieder schließen können. Sie dürfen auch nicht andere wichtige Inhalte verdecken.
- Bedienbar
- Entwicklung
- WCAG AA
WCAG Kriterium: 2.5.5 Zielgröße
Alle klickbaren Elemente (Links, Buttons, Eingabefelder) sind mindestens 24x24px groß für präzise Bedienung mit Maus, Touch und anderen Zeigegeräten.
- Bedienbar
- Design
- Entwicklung
- WCAG A
WCAG Kriterium: 2.4.4 Linkzweck (im Kontext)
Links müssen klar benennen, wohin sie führen oder was passiert. Statt „hier klicken“ also besser: „Mehr über unser Team erfahren“. So können alle Nutzer – auch mit Screenreader – den Link sinnvoll einordnen.
- Bedienbar
- Entwicklung
- Redaktion
Lernartikel über dieses Thema:
Navigation
- WCAG AA
WCAG Kriterium: 2.4.5 Mehrere Wege
Man kann das Kriterium erfüllen, indem man z.B. eine Sitemap oder eine Suchfunktion anbietet.
- Bedienbar
- Design
- Entwicklung
Lernartikel über dieses Thema: - WCAG A
WCAG Kriterium: 2.4.1 Blöcke umgehen
Ein „Skip to Content“-Link ermöglicht es Nutzern, direkt zum Hauptinhalt zu springen – ohne sich durch Navigation oder Wiederholungen zu tabben. Das spart Zeit und erleichtert besonders Screenreader- und Tastaturnutzern die Orientierung.
- Bedienbar
- Entwicklung
- Redaktion
Lernartikel über dieses Thema:
Multimedia & Animationen
- WCAG A
WCAG Kriterium: 2.2.1 Timing anpassbar
Nutzer müssen genug Zeit haben, um Inhalte zu lesen oder Eingaben zu machen – ohne Zeitdruck. Automatische Abläufe (z. B. Sicherheits-Logout-Timer, automatischer Slider-Wechsel) sollten entweder vermieden werden oder sich pausieren bzw. verlängern lassen.
- Bedienbar
- Design
- Entwicklung
- WCAG A
WCAG Kriterium: 2.3.1 “2.3.1 Drei-Flashes oder unter Schwelle
Inhalte dürfen nicht mehr als drei Mal pro Sekunde blinken oder aufblitzen, da sie epileptische Anfälle auslösen können.
- Bedienbar
- Design
- Entwicklung
- WCAG A
WCAG Kriterium: 2.2.2 Pause, Stop, Ausblenden
Videos oder Animationen, die automatisch starten und länger als 5 Sekunden dauern, müssen pausierbar, stoppbar oder ausblendbar sein.
- Bedienbar
- Entwicklung
Lernartikel über dieses Thema: - WCAG A
WCAG Kriterium: 1.2.2 Untertitel (aufgezeichnet)
Alle gesprochenen Inhalte im Video sollten durch Untertitel ergänzt werden – damit auch Menschen mit Hörbehinderung dem Inhalt folgen können. Die Untertitel sollten gut lesbar und synchron zum Gesprochenen sein.
- wahrnehmbar
- Redaktion
Lernartikel über dieses Thema: - WCAG AA
WCAG Kriterium: 1.2.5 Audiodeskription (vorab aufgezeichnet)
Wichtige visuelle Informationen im Video (z. B. Gestik, Szenenwechsel, Text-Einblendungen) sollten zusätzlich als Audiodeskription eingesprochen werden. So können auch blinde oder sehbehinderte Menschen den Inhalt vollständig erfassen
- wahrnehmbar
- Redaktion
Lernartikel über dieses Thema: - WCAG AA
WCAG Kriterium: 1.2.4 Untertitel (Live)
Bei Live-Videos oder Livestreams sollten Echtzeit-Untertitel bereitgestellt werden – etwa durch automatische Systeme oder menschliche Schriftdolmetscher. So können auch gehörlose oder schwerhörige Nutzerinnen folgen.
- wahrnehmbar
- Entwicklung
- Redaktion
Lernartikel über dieses Thema: - WCAG A
WCAG Kriterium: Audio- und Video-Inhalte (vorab aufgezeichnet)
Audioinhalte wie Podcasts oder Interviews sollten als vollständiger Text (Transkript) verfügbar sein. Das hilft Menschen mit Hörbehinderung – und ist auch für Suchmaschinen und leises Mitlesen praktisch.
- wahrnehmbar
- Redaktion
Lernartikel über dieses Thema:
Tastatur & Bedienung
- WCAG AA
WCAG Kriterium: 2.4.7 Fokus sichtbar
Wenn Nutzer mit der Tastatur navigieren, muss immer klar erkennbar sein, welches Element gerade aktiv ist (z. B. durch einen sichtbaren Rahmen). Die Reihenfolge der Fokusstationen sollte der logischen Struktur der Seite folgen.
- Bedienbar
- Entwicklung
- WCAG A
WCAG Kriterium: 2.1.2 Keine Tastaturfalle
Alle interaktiven Elemente müssen vollständig mit der Tastatur bedienbar sein – und zwar ohne „Fallen“. Das bedeutet: Man darf nicht irgendwo hängen bleiben, ohne wieder herauszukommen (z. B. in einem Modal oder Dropdown).
- Bedienbar
- Entwicklung
- WCAG A
WCAG Kriterium: 2.1.1 Tastatur
Alle interaktiven Elemente können ohne Maus bedient werden.
- Bedienbar
- Entwicklung
Formulare
- WCAG AA
WCAG Kriterium: 1.3.5 Eingabezweck identifizieren
Formularfelder für persönliche Daten haben entsprechende autocomplete-Attribute.
- Verständlich
- Entwicklung
Lernartikel über dieses Thema: - WCAG A
WCAG Kriterium: 1.1.1 Nicht-Text-Inhalte
Wenn ein CAPTCHA verwendet wird (z. B. „Ich bin kein Roboter“), muss es eine barrierefreie Alternative geben – etwa eine einfache Rechenaufgabe oder ein Audio-CAPTCHA für sehbehinderte Menschen.
- Verständlich
- Entwicklung
Lernartikel über dieses Thema: - WCAG AA
WCAG Kriterium: 3.3.4 Fehlervermeidung (rechtlich, finanzielle, Daten)
Aktionen wie das Löschen eines Kontos oder das Absenden eines Formulars sollten rückgängig gemacht oder bestätigt werden können – zum Beispiel durch eine „Rückgängig“-Funktion oder eine Sicherheitsabfrage.
- Verständlich
- Entwicklung
- WCAG AA
WCAG Kriterium: 3.3.3 Fehlervorschlag
Bei Fehlern werden konkrete Korrekturvorschläge gemacht.
- Verständlich
- Entwicklung
- WCAG A
WCAG Kriterium: 3.3.1 Fehleridentifikation
Validierungsfehler werden klar identifiziert und beschrieben.
- Verständlich
- Design
- Entwicklung
- WCAG A
WCAG Kriterium: 1.3.1 Info und Beziehungen
Jedes Eingabefeld braucht ein sichtbares Label, das erklärt, was dort eingegeben werden soll – zum Beispiel „E-Mail-Adresse“ oder „Vorname“. So können auch Screenreader-Nutzer das Formular korrekt ausfüllen.
- Verständlich
- Entwicklung
Lernartikel über dieses Thema:
Semantik & Code
- WCAG A
WCAG Kriterium: 4.1.2 Name, Rolle, Wert
Akkordeons, Drop-downs oder andere ausklappbare Bereiche müssen auch mit der Tastatur und Screenreadern bedienbar sein. Nutzer sollen erkennen können, was eingeklappt ist – und es gezielt öffnen und schließen können.
- Robust
- Entwicklung
Lernartikel über dieses Thema: - WCAG A
WCAG Kriterium: 4.1.3 Statusmeldungen
Wenn sich Inhalte auf einer Seite automatisch ändern (z. B. durch AJAX oder Live-Updates), müssen Screenreader über diese Änderungen informiert werden. Das geschieht durch sogenannte ARIA-Live-Regionen, die neue Inhalte automatisch ansagen lassen.
- Robust
- Entwicklung
Lernartikel über dieses Thema: - WCAG AA
WCAG Kriterium: 1.3.1 Info und Beziehungen
Eine klare, semantische HTML-Struktur hilft Screenreadern und anderen Hilfsmitteln, den Seitenaufbau zu verstehen. Verwende z. B.
<header>,<main>,<nav>und<footer>statt nur<div>-Containern. So wird der Inhalt logisch gegliedert und besser zugänglich.- Robust
- Entwicklung
Lernartikel über dieses Thema: - WCAG A
WCAG Kriterium: 4.1.1 Parsing
Der HTML-Code sollte fehlerfrei und valide sein. Fehlerhafte Struktur kann die Interpretation durch Hilfsmittel behindern.
- Robust
- Entwicklung
Responsive & Mobile
- WCAG AA
WCAG Kriterium: 1.3.4 Orientierung
Inhalte funktionieren sowohl im Hoch- als auch Querformat.
- wahrnehmbar
- Design
- Entwicklung
- WCAG AA
WCAG Kriterium: 1.4.10 Reflow
Der Inhalt muss sich bis auf 320 CSS-Pixel (bzw. 400 % Zoom eines 1280-px-Desktops) ohne horizontales Scrollen und ohne Funktions- oder Informationsverlust umfließen lassen.
- wahrnehmbar
- Design
- Entwicklung
Lernartikel über dieses Thema: