WCAG 2.1 Compliance-Checkliste
Überprüfen Sie Ihre Website anhand dieser umfassenden Checkliste auf Einhaltung der Web Content Accessibility Guidelines (WCAG) 2.1.
Ihr Fortschritt
Aktionen
Benötigen Sie Hilfe?
Unsere Experten können Ihnen helfen, Ihre Website vollständig barrierefrei zu gestalten.
Kostenlose Analyse erhaltenBarrierefreiheits-Checkliste
Diese Checkliste basiert auf WCAG 2.1. Für die Einhaltung der EU-Richtlinien ist mindestens Level AA erforderlich.
Nicht-Text-Inhalte
Alle Nicht-Text-Inhalte, die dem Benutzer präsentiert werden, haben eine Textalternative, die dem Zweck des Nicht-Text-Inhalts dient.
Tipps zur Umsetzung:
- Fügen Sie allen Bildern aussagekräftige alt-Attribute hinzu
- Stellen Sie Transkriptionen für Audio-Inhalte bereit
- Beschreiben Sie Diagramme und Grafiken im Text oder mit longdesc
- Verwenden Sie aria-label für UI-Komponenten ohne sichtbaren Text
Nur Audio und nur Video (aufgezeichnet)
Für aufgezeichnete reine Audio- und reine Video-Inhalte werden Alternativen bereitgestellt, die gleichwertige Informationen vermitteln.
Tipps zur Umsetzung:
- Stellen Sie Transkriptionen für Audio-Inhalte bereit
- Bieten Sie Audiobeschreibungen oder Textbeschreibungen für Videos ohne Ton
Untertitel (aufgezeichnet)
Für alle aufgezeichneten Audio-Inhalte in synchronisierten Medien werden Untertitel bereitgestellt.
Tipps zur Umsetzung:
- Fügen Sie allen Videos mit Ton Untertitel hinzu
- Stellen Sie sicher, dass Untertitel alle gesprochenen Dialoge und wichtigen Soundeffekte enthalten
- Verwenden Sie das <track>-Element für HTML5-Videos
Audiodeskription oder Medienalternative (aufgezeichnet)
Für synchronisierte Medien wird eine Alternative für zeitbasierte Medien oder eine Audiodeskription bereitgestellt.
Tipps zur Umsetzung:
- Bieten Sie eine Audiodeskription für Videos an, die wichtige visuelle Informationen enthalten
- Oder stellen Sie ein vollständiges Texttranskript bereit, das alle visuellen und auditiven Informationen enthält
Untertitel (live)
Für alle Live-Audio-Inhalte in synchronisierten Medien werden Untertitel bereitgestellt.
Tipps zur Umsetzung:
- Verwenden Sie Echtzeit-Untertitelungsdienste für Live-Streams
- Planen Sie im Voraus, um sicherzustellen, dass Live-Events mit Untertiteln versehen werden können
Audiodeskription (aufgezeichnet)
Für alle aufgezeichneten Video-Inhalte in synchronisierten Medien wird eine Audiodeskription bereitgestellt.
Tipps zur Umsetzung:
- Nehmen Sie zusätzliche Audiokommentare auf, die wichtige visuelle Informationen beschreiben
- Stellen Sie sicher, dass die Audiodeskription in Dialogpausen eingefügt wird
- Erwägen Sie eine erweiterte Audiodeskription, wenn die Pausen zu kurz sind
Info und Beziehungen
Informationen, Struktur und Beziehungen, die durch Präsentation vermittelt werden, können programmatisch bestimmt werden oder sind im Text verfügbar.
Tipps zur Umsetzung:
- Verwenden Sie semantisches HTML (h1-h6, ul, ol, dl, etc.)
- Verwenden Sie korrekte Tabellenmarkierungen mit th, caption und scope
- Verwenden Sie label-Elemente für Formularfelder
- Verwenden Sie fieldset und legend für Formulargruppen
- Verwenden Sie ARIA-Attribute, wenn semantisches HTML nicht ausreicht
Sinnvolle Reihenfolge
Wenn die Reihenfolge, in der Inhalte präsentiert werden, die Bedeutung beeinflusst, kann die korrekte Lesereihenfolge programmatisch bestimmt werden.
Tipps zur Umsetzung:
- Stellen Sie sicher, dass die DOM-Reihenfolge der visuellen Reihenfolge entspricht
- Testen Sie die Seite ohne CSS, um die logische Reihenfolge zu überprüfen
- Verwenden Sie tabindex nur, wenn unbedingt nötig
Sensorische Eigenschaften
Anweisungen, die zum Verständnis und zur Bedienung von Inhalten bereitgestellt werden, verlassen sich nicht ausschließlich auf sensorische Eigenschaften von Komponenten.
Tipps zur Umsetzung:
- Verwenden Sie nicht nur Farbe, Form oder Position als Anweisung (z.B. 'Klicken Sie auf den roten Button')
- Ergänzen Sie visuelle Hinweise mit Text (z.B. 'Klicken Sie auf den roten Button mit der Aufschrift 'Absenden'')
- Vermeiden Sie Anweisungen wie 'Klicken Sie rechts' oder 'in der Box oben'
Tastatur
Alle Funktionalitäten sind über eine Tastaturschnittstelle bedienbar, ohne dass bestimmte Zeitvorgaben für einzelne Tastenanschläge erforderlich sind.
Tipps zur Umsetzung:
- Stellen Sie sicher, dass alle interaktiven Elemente mit der Tastatur bedienbar sind
- Testen Sie die Navigation mit Tab, Enter, Leertaste und Pfeiltasten
- Vermeiden Sie Funktionen, die nur mit Mausbewegungen wie Hover oder Drag-and-Drop funktionieren
- Implementieren Sie Tastaturalternativen für mausspezifische Aktionen
Keine Tastaturfalle
Wenn der Tastaturfokus auf ein Element der Seite verschoben werden kann, dann kann der Fokus auch von diesem Element wegbewegt werden, und wenn dazu mehr als unmodifizierte Pfeiltasten oder Tabulatortasten erforderlich sind, wird der Benutzer darüber informiert.
Tipps zur Umsetzung:
- Stellen Sie sicher, dass Benutzer nicht in einem Element 'gefangen' werden
- Testen Sie alle modalen Dialoge und Overlays auf Tastaturzugänglichkeit
- Stellen Sie sicher, dass benutzerdefinierte Widgets den Fokus nicht blockieren
Zeitbegrenzungen anpassbar
Für jede Zeitbegrenzung, die durch den Inhalt festgelegt wird, gilt mindestens eines der folgenden Kriterien.
Tipps zur Umsetzung:
- Erlauben Sie Benutzern, Zeitlimits zu deaktivieren, anzupassen oder zu verlängern
- Warnen Sie Benutzer vor Ablauf der Zeit und geben Sie ihnen die Möglichkeit, die Zeit zu verlängern
- Vermeiden Sie automatische Aktualisierungen oder Weiterleitungen ohne Benutzerinteraktion
Drei Blitze oder unter Schwellenwert
Webseiten enthalten nichts, was mehr als dreimal in einer Sekunde aufblitzt, oder der Blitz liegt unterhalb der allgemeinen Blitz- und roten Blitzschwellenwerte.
Tipps zur Umsetzung:
- Vermeiden Sie blinkende oder flackernde Inhalte, die mehr als dreimal pro Sekunde auftreten
- Reduzieren Sie die Größe blinkender Inhalte, wenn sie unvermeidbar sind
- Bieten Sie Benutzern die Möglichkeit, Animationen zu stoppen oder zu pausieren
Blöcke umgehen
Es steht ein Mechanismus zur Verfügung, um Blöcke von Inhalten zu umgehen, die auf mehreren Webseiten wiederholt werden.
Tipps zur Umsetzung:
- Implementieren Sie Skip-Links am Anfang der Seite (z.B. 'Zum Hauptinhalt springen')
- Verwenden Sie ARIA-Landmarks (main, nav, header, footer, etc.)
- Stellen Sie eine Sitemap oder Inhaltsverzeichnis bereit
Seite mit Titel versehen
Webseiten haben Titel, die ihr Thema oder ihren Zweck beschreiben.
Tipps zur Umsetzung:
- Verwenden Sie eindeutige und beschreibende <title>-Elemente für jede Seite
- Beginnen Sie mit dem Spezifischen, gefolgt vom Allgemeinen (z.B. 'Kontaktformular - Firmenname')
- Aktualisieren Sie den Titel dynamisch, wenn sich der Seiteninhalt ändert (bei Single-Page-Applications)
Sprache der Seite
Die Standardsprache jeder Webseite kann programmatisch bestimmt werden.
Tipps zur Umsetzung:
- Definieren Sie die Hauptsprache der Seite mit dem lang-Attribut im html-Element
- Verwenden Sie gültige Sprachcodes (z.B. 'de' für Deutsch, 'en' für Englisch)
Bei Fokus
Wenn eine Komponente den Fokus erhält, löst dies keine Kontextänderung aus.
Tipps zur Umsetzung:
- Vermeiden Sie automatische Formularübermittlungen, wenn ein Feld den Fokus erhält
- Öffnen Sie keine neuen Fenster, wenn ein Element fokussiert wird
- Ändern Sie nicht die Tastaturnavigation, wenn ein Element fokussiert wird
Fehlererkennung
Wenn ein Eingabefehler automatisch erkannt wird, wird das fehlerhafte Element identifiziert und der Fehler wird dem Benutzer als Text beschrieben.
Tipps zur Umsetzung:
- Markieren Sie fehlerhafte Formularfelder deutlich
- Beschreiben Sie den Fehler in Textform und geben Sie Hinweise zur Korrektur
- Verwenden Sie aria-invalid und aria-describedby für Screenreader-Unterstützung
Syntaxanalyse
Bei Inhalten, die mit Auszeichnungssprachen implementiert wurden, haben Elemente vollständige Start- und End-Tags, Elemente sind entsprechend ihrer Spezifikation verschachtelt, Elemente enthalten keine doppelten Attribute, und alle IDs sind eindeutig.
Tipps zur Umsetzung:
- Verwenden Sie valides HTML mit korrekter Verschachtelung
- Schließen Sie alle Tags ordnungsgemäß
- Vermeiden Sie doppelte ID-Attribute
- Validieren Sie Ihren Code mit dem W3C Validator
Name, Rolle, Wert
Für alle Benutzeroberflächen-Komponenten können Name und Rolle programmatisch bestimmt werden; Zustände, Eigenschaften und Werte, die vom Benutzer festgelegt werden können, können programmatisch festgelegt werden; und Benachrichtigungen über Änderungen an diesen Elementen stehen Benutzeragenten zur Verfügung.
Tipps zur Umsetzung:
- Verwenden Sie semantische HTML-Elemente (button, input, select, etc.)
- Fügen Sie aussagekräftige Labels zu Formularelementen hinzu
- Verwenden Sie ARIA-Attribute für benutzerdefinierte Widgets
- Stellen Sie sicher, dass Statusänderungen (z.B. ausgeklappt/eingeklappt) für Screenreader erkennbar sind
Kontrast (Minimum)
Die visuelle Darstellung von Text und Bildern von Text hat ein Kontrastverhältnis von mindestens 4,5:1.
Tipps zur Umsetzung:
- Stellen Sie sicher, dass Text einen Kontrast von mindestens 4,5:1 zum Hintergrund hat
- Für großen Text (18pt oder 14pt fett) ist ein Kontrast von 3:1 ausreichend
- Verwenden Sie Tools wie den WebAIM Contrast Checker zur Überprüfung
- Berücksichtigen Sie auch den Kontrast bei Hover- und Fokus-Zuständen
Textgröße ändern
Text kann ohne Hilfstechnologie und ohne Verlust von Inhalt oder Funktionalität bis zu 200 Prozent vergrößert werden.
Tipps zur Umsetzung:
- Verwenden Sie relative Einheiten wie em, rem oder Prozent statt fester Pixelgrößen
- Testen Sie Ihre Website mit 200% Zoom im Browser
- Stellen Sie sicher, dass bei Vergrößerung kein Text abgeschnitten wird oder überlappt
- Vermeiden Sie horizontales Scrollen bei 200% Zoom auf 1280px Breite
Verschiedene Methoden
Es steht mehr als eine Möglichkeit zur Verfügung, um eine Webseite innerhalb einer Gruppe von Webseiten zu finden.
Tipps zur Umsetzung:
- Bieten Sie eine Suchfunktion an
- Stellen Sie eine Sitemap bereit
- Implementieren Sie eine konsistente Navigation
- Verwenden Sie Breadcrumbs für hierarchische Websites
- Bieten Sie eine Inhaltsübersicht oder ein Inhaltsverzeichnis an
Fokus sichtbar
Jede tastaturgesteuerte Benutzeroberfläche hat einen Bedienmodus, bei dem der Tastaturfokus sichtbar ist.
Tipps zur Umsetzung:
- Entfernen Sie nicht den Standard-Fokusrahmen (outline: none) ohne Alternative
- Gestalten Sie den Fokusindikator deutlich sichtbar (z.B. mit Farbe, Umrandung oder Hintergrund)
- Stellen Sie sicher, dass der Fokusindikator einen ausreichenden Kontrast hat
- Testen Sie die Sichtbarkeit des Fokus bei der Tastaturnavigation
Nächste Schritte
Die Überprüfung anhand dieser Checkliste ist ein wichtiger erster Schritt. Für eine vollständige Bewertung empfehlen wir:
- Führen Sie automatisierte Tests mit Tools wie Axe, WAVE oder Lighthouse durch, um technische Probleme zu identifizieren.
- Testen Sie Ihre Website mit Screenreadern wie NVDA, JAWS oder VoiceOver, um die tatsächliche Benutzererfahrung zu verstehen.
- Führen Sie Benutzertests mit Menschen mit verschiedenen Behinderungen durch, um reale Nutzungsprobleme zu identifizieren.
- Lassen Sie eine professionelle Barrierefreiheitsanalyse durchführen, um sicherzustellen, dass Sie alle Anforderungen erfüllen.