Die unverzichtbare WCAG-Checkliste für barrierefreie Websites

Trotz der Vorteile digitaler Barrierefreiheit haben Organisationen weiterhin Schwierigkeiten, die Mindestanforderungen an Barrierefreiheit zu erfüllen. Basierend auf einer Analyse von über 400.000 Unternehmenswebsites auf 15.000 Seiten haben wir festgestellt, dass:

38 % der Bilder für Menschen mit Sehbehinderung nicht zugänglich sind.
80 % der Seiten Links enthalten, die für Menschen mit Seh- oder kognitiven Einschränkungen nicht eindeutig sind.
35 % der Formulare keine klaren Beschriftungen haben.

Diese und viele weitere Probleme führen dazu, dass nur 3 % des Internets für Menschen mit Behinderungen zugänglich sind.

Das World Wide Web Consortium (W3C) hat die Web Content Accessibility Guidelines (WCAG) entwickelt, um Organisationen dabei zu unterstützen, die Barrierefreiheit für Menschen mit Behinderungen zu verbessern. WCAG ist ein internationaler Standard, dem Unternehmen folgen sollten, um anerkannte Barrierefreiheitsstandards zu erfüllen. Die Richtlinien enthalten 86 Erfolgskriterien, die – wenn sie erfüllt sind – die Barrierefreiheit und Nutzbarkeit auf digitalen Plattformen wie Websites, mobilen Geräten, digitalen Dokumenten und anderen Benutzeroberflächen erhöhen.

Nachfolgend haben wir eine detaillierte Checkliste der WCAG-Erfolgskriterien zusammengestellt, um sicherzustellen, dass Ihre digitalen Produkte die Standards für Web-Barrierefreiheit erfüllen.

WCAG-Checkliste

Wir haben eine umfassende Checkliste erstellt, die Ihnen hilft, die WCAG-Anforderungen an Barrierefreiheit zu erfüllen. Lassen Sie sich nicht von der Anzahl der Erfolgskriterien überwältigen – es sind viele, aber mit den richtigen Tools (z. B. dem kostenlosen Web Accessibility Checker von AudioEye ) ist der Einstieg gut zu bewältigen.

Wir empfehlen, mit den Erfolgskriterien der Stufe A zu beginnen, bevor Sie zu höheren Stufen übergehen. Sie können auch zunächst einfachere Probleme beheben und parallel einen Plan für komplexere Themen erstellen.

WCAG-Checkliste Stufe A

Erfolgskriterium	Beschreibung	Erledigt
Nicht-Text-Inhalt	Alle Nicht-Text-Inhalte (z. B. Bilder, Bildschaltflächen und Hotspots in Image Maps) verfügen über geeignete Alternativtexte.
Nur-Audio und Nur-Video	Für reine Video- oder Audioinhalte werden beschreibende und genaue Transkripte bereitgestellt.
Untertitel	Für vorab aufgezeichnete oder Live-Videos (z. B. YouTube) werden Untertitel bereitgestellt.
Information und Beziehungen	Überschriften haben die korrekte semantische Auszeichnung. Tabellen sind mit den entsprechenden Überschriften verknüpft und enthalten bei Bedarf Beschriftungen. Textbeschriftungen sind den richtigen Formularelementen zugeordnet.
Sinnvolle Reihenfolge	Die Navigationsreihenfolge folgt der Code-Reihenfolge; die Navigation ist klar und intuitiv.
Sensorische Merkmale	Anweisungen hängen nicht von der visuellen Position, Form oder Größe ab (z. B. 'Die Anweisungen befinden sich rechts' oder 'Klicken Sie auf die quadratische Schaltfläche, um fortzufahren').
Farbverwendung	Farbe allein wird nicht verwendet, um Informationen zu vermitteln oder Links vom umgebenden Text zu unterscheiden, es sei denn, das Farbkontrastverhältnis ist angemessen.
Audiosteuerung	Nutzer können Audioinhalte, die automatisch länger als drei Sekunden abgespielt werden, anhalten, stoppen, die Lautstärke ändern oder stummschalten.
Tastatur	Webelemente können einfach über die Tastatur bedient werden und beinhalten seitenbezogene Tastenkombinationen.
Keine Tastaturfalle	Tastaturfokus und Tastenkombinationen sind auf keinen Seitenelementen gesperrt oder gefangen.
Tastenkombinationen mit Zeichen	Nutzer müssen Tastenkombinationen deaktivieren und auf nicht druckbare Tasten wie Strg, Alt usw. umschalten können.
Anpassbare Zeitbegrenzung	Seiten mit Zeitbegrenzungen ermöglichen es Nutzern, die Zeitbegrenzung anzupassen, auszuschalten oder zu verlängern.
Anhalten, Stoppen, Ausblenden	Automatisch bewegte, blinkende, scrollende oder aktualisierte Inhalte, die länger als fünf Sekunden andauern, können von Nutzern angehalten, gestoppt oder ausgeblendet werden.
Drei Blitze oder weniger	Seiteninhalte blitzen nicht mehr als dreimal pro Sekunde.
Blöcke überspringen	Nutzer können Navigationselemente oder andere Seitenelemente überspringen, die auf mehreren Webseiten wiederholt werden.
Seitentitel	Die Webseite hat einen beschreibenden, informativen Seitentitel.
Fokus-Reihenfolge	Die Reihenfolge der Links ist klar und folgt einer logischen, intuitiven Abfolge.
Link-Zweck	Nutzer können den Zweck des Links allein aus dem Text erkennen. Links mit ähnlichem Text, die zu unterschiedlichen Zielen führen, sind leicht unterscheidbar.
Zeiger-Gesten	Benutzeraktionen können mit einer einzigen Zeigergeste ausgeführt werden.
Zeiger-Abbruch	Unbeabsichtigte Aktivierung von Steuerelementen wird vermieden, indem keine 'onmousedown'-Aktivierung verwendet wird.
Bewegungsaktivierung	Funktionen, die durch Benutzerbewegung oder Gerätemotion ausgelöst werden, können deaktiviert werden. Ähnliche Funktionen sind über Standardsteuerungen wie Schaltflächen verfügbar.
Fehlererkennung	Formularvalidierungs- oder Eingabefehler werden klar angezeigt und der Zugriff auf den Fehler ist schnell möglich.

WCAG-Checkliste Stufe AA

Erfolgskriterium	Beschreibung	Erledigt
Untertitel	Live-Medien mit Audio enthalten synchronisierte Untertitel.
Audiodeskription	Nutzer haben Zugriff auf Audiodeskriptionen für nicht-live Videos.
Ausrichtung	Die Ausrichtung der Website ist nicht auf Hoch- oder Querformat beschränkt; Nutzer können sie nach Bedarf anpassen.
Eingabezweck identifizieren	Felder, die bestimmte Nutzerinformationen abfragen, verfügen über ein definiertes 'autocomplete'-Attribut.
Kontrast	Sowohl Text als auch Bilder haben ein Kontrastverhältnis von mindestens 4,5:1. Großer Text hat ein Verhältnis von mindestens 3:1.
Text vergrößern	Seitenelemente bleiben auch bei 200 % Zoom lesbar und funktionsfähig.
Bilder von Text	Wenn eine visuelle Darstellung auch durch Klartext erreicht werden kann, wird kein Bild ausschließlich zur Darstellung von Text verwendet.
Umfluss	Die Funktionalität bleibt erhalten, wenn Inhalte mit einer Breite von 320 Pixeln angezeigt werden. Horizontales Scrollen wird so weit wie möglich vermieden.
Nicht-Text-Kontrast (Minimum)	Ein Mindestkontrastverhältnis von 3:1 ist für verschiedene Objekte wie Symbole, Diagramme oder Grafiken vorhanden.
Textabstand	Inhalt oder Funktionalität gehen nicht verloren, wenn Nutzer den Absatzabstand anpassen.
Inhalt bei Hover oder Fokus	Inhalte, die bei Hover oder Fokus angezeigt werden, können ausgeblendet werden, ohne die Tastatur oder den Zeiger zu bewegen.
Mehrere Wege	Nutzer haben mehr als eine Möglichkeit, andere Webseiten auf einer Website zu finden.
Überschriften und Beschriftungen	Seitenüberschriften und Beschriftungen sind informativ und werden nur dann doppelt verwendet, wenn es unbedingt notwendig ist.
Fokus sichtbar	Für Seitenelemente ist ein sichtbarer Indikator vorhanden, wenn sie Tastaturfokus erhalten.
Fokus nicht verdeckt	Elemente mit Tastaturfokus sind vollständig sichtbar.
Ziehen-Bewegung	Aktionen, die das Ziehen mit dem Zeiger erfordern, können auch mit einem einzelnen Zeiger ausgeführt werden.
Zielgröße	Zeigerflächen sind mindestens 24 x 24 Pixel groß, sofern nicht anders angegeben.
Sprache von Teilen/Seite	Die Sprache von Seiten ist über das 'lang'-Attribut leicht erkennbar.
Konsistente Navigation	Elemente, die auf einer Website wiederholt werden (z. B. eine Suchleiste), sind auf allen Einzelseiten konsistent beschriftet.
Fehlervorschlag	Wird ein Fehler erkannt, werden zeitnahe und zugängliche Korrekturvorschläge bereitgestellt.
Fehlervermeidung	Wenn ein Nutzer finanzielle, rechtliche oder Testdaten ändert oder löscht, kann die Aktion rückgängig gemacht, bestätigt oder nach Bedarf überprüft werden.
Übermäßige Authentifizierung	Kognitive Funktionen sind bei Authentifizierungsprozessen nicht erforderlich, es sei denn, sie können durch nicht-textliche Inhalte des Nutzers (z. B. Nutzerbild) abgeschlossen, umgangen oder identifiziert werden.
Statusmeldungen	Statusmeldungen werden über Live-Regionen oder ARIA-Alerts an Screenreader ausgegeben.

WCAG-Checkliste Stufe AAA

Erfolgskriterium	Beschreibung	Erledigt
Gebärdensprache	Für Medien mit Audio wird eine Gebärdensprachinterpretation bereitgestellt.
Erweiterte Audiodeskription	Wenn das Originalvideo nicht genügend Pausen enthält und nicht für Audiodeskriptionen optimiert ist, wird ein separates Video mit ausreichenden Pausen und Audiodeskriptionen bereitgestellt.
Medienalternative	Vorab aufgezeichnete Medien enthalten ein beschreibendes Transkript.
Nur-Audio	Für Live-Audioinhalte wird ein beschreibender Text bereitgestellt.
Zweck identifizieren	ARIA wird verwendet, um die HTML-Semantik zu erweitern, sodass Nutzer den Zweck von Interface-Elementen leichter verstehen können.
Kontrast	Bilder und Text haben ein Farbkontrastverhältnis von 7:1.
Wenig oder kein Hintergrundaudio	Audioinhalte haben wenig bis keine Hintergrundgeräusche und sind dadurch leicht unterscheidbar.
Visuelle Präsentation	Textblöcke mit mehr als einem Satz sind: weniger als 80 Zeichen breit, nicht voll ausgerichtet, haben ausreichenden Zeilenabstand, passende Vorder- und Hintergrundfarben und erfordern kein horizontales Scrollen, wenn sie verdoppelt werden.
Bilder von Text	Text innerhalb eines Bildes wird nur zu dekorativen Zwecken oder dann verwendet, wenn die Information nicht allein durch Text vermittelt werden kann.
Tastatur	Alle Funktionen sind über die Tastatur verfügbar.
Keine Zeitbegrenzung	Für Seiteninhalte oder Funktionen gibt es keine Zeitlimits oder Einschränkungen.
Unterbrechungen	Unterbrechungen wie Benachrichtigungen oder Updates können vom Nutzer aufgeschoben werden.
Erneute Authentifizierung	Nutzer können eine Seite erneut authentifizieren und Aktivitäten fortsetzen, ohne Daten zu verlieren.
Timeouts	Nutzer werden ausreichend vor Timeouts gewarnt, die zu Datenverlust führen können (sofern Daten nicht länger als mehrere Stunden Inaktivität gespeichert werden können).
Drei Blitze	Kein Seiteninhalt blitzt dreimal pro Sekunde.
Animationen durch Interaktion	Nicht-essenzielle Animationen und Bewegungen können von Nutzern deaktiviert werden.
Position	Eine Website, die Teil einer Sequenz von Webseiten ist, ist entsprechend durch Breadcrumbs oder die Angabe von Sequenzschritten gekennzeichnet.
Link-Zweck	Nutzer können den Zweck jedes Links allein am Linktext unterscheiden.
Abschnittsüberschriften	Inhaltsabschnitte sind durch Überschriften gekennzeichnet.
Fokus nicht verdeckt (Erweitert)	Elemente mit Tastaturfokus sind vollständig sichtbar.
Fokus-Erscheinungsbild	Wenn benutzerdefinierte Indikatoren oder Hintergründe verwendet werden, beträgt der Kontrast zwischen fokussierten/nicht fokussierten Zuständen mindestens 3:1 und ist mindestens so groß wie die Fläche eines 2 Pixel dicken Rahmens um das Element.
Zielgröße	Klickbare Ziele sind 44 x 44 Pixel groß, sofern keine alternative Zielgröße bereitgestellt wird.
Gleichzeitige Eingabemechanismen	Inhalte sind nicht auf einen bestimmten Eingabetyp (z. B. nur Tastatur oder nur Touch) beschränkt und unterstützen alternative Eingaben.
Ungewöhnliche Wörter	Unbekannte oder mehrdeutige Wörter werden durch ein Glossar, eine Definitionenliste oder eine andere geeignete Methode erklärt.
Abkürzungen	Unbekannte Abkürzungen werden bei der ersten Verwendung ausgeschrieben und erklärt.
Leseniveau	Für anspruchsvolle Inhalte (in der Regel über dem Leseniveau der 9. Klasse) werden verständlichere Alternativen bereitgestellt.
Aussprache	Für Wörter, die für das Verständnis der Seite wesentlich sind, werden Aussprachehilfen bereitgestellt.
Änderung auf Anfrage	Wesentliche Änderungen (z. B. das Öffnen von Pop-up-Fenstern oder Änderungen des Tastaturfokus) werden vom Nutzer initiiert und können bei Bedarf deaktiviert werden.
Hilfe	Nutzern, die Unterstützung benötigen, werden Anleitungen oder Hinweise zur Erledigung von Aufgaben bereitgestellt.
Fehlervermeidung	Nutzer können Eingaben nach dem Absenden von Informationen rückgängig machen, überprüfen oder bestätigen.
Barrierefreie Authentifizierung (Erweitert)	Kognitive Funktionstests sind in keinem Schritt des Authentifizierungsprozesses erforderlich, es sei denn, der Test kann umgangen oder mit einem anderen Mechanismus abgeschlossen werden.

WCAG-Konformität und digitale Barrierefreiheitsgesetze

Jeder hat das Recht, auf Online-Inhalte zuzugreifen und diese zu nutzen – die Erfüllung der oben genannten Erfolgskriterien ermöglicht es Ihnen, eine barrierefreie und funktionale Umgebung zu schaffen, die für alle nutzbar ist. Digitale Barrierefreiheit ist jedoch auch eine gesetzliche Anforderung weltweit. Die meisten internationalen Barrierefreiheitsgesetze verwenden WCAG als Standard für Barrierefreiheit, darunter:

Das Americans with Disabilities Act (ADA): Das ADA verbietet Diskriminierung von Menschen mit Behinderungen in öffentlichen Räumen, wozu auch das Internet zählt. Die Nichteinhaltung des ADA (einschließlich der Erstellung einer ADA-konformen Website) kann zu rechtlichen Schritten führen. Um dem ADA zu entsprechen, müssen Sie die Anforderungen von WCAG 2.1 Stufe AA erfüllen.
Der European Accessibility Act (EAA): Ähnlich wie das ADA verlangt der EAA von allen öffentlichen Organisationen innerhalb der Europäischen Union (EU), barrierefreie Produkte und Dienstleistungen bereitzustellen. Beachten Sie, dass der EAA die POUR-Prinzipien stärker als WCAG durchsetzt; das Erfüllen der WCAG-Prinzipien versetzt Sie jedoch in eine gute Ausgangsposition, um auch die POUR-Prinzipien zu erfüllen.

AudioEye: So erreichen Sie WCAG-Konformität mit Leichtigkeit

Ihre Website barrierefrei zu machen, muss nicht überwältigend sein. Die obige Checkliste bietet Ihnen eine solide Grundlage, aber bei so vielen WCAG-Erfolgskriterien – und einigen sehr technischen Details – kann es schwierig sein, jedes Problem selbst zu erkennen und zu beheben.

Hier kommt AudioEye ins Spiel. Unser dreistufiger Ansatz für Barrierefreiheit kombiniert leistungsstarke Automatisierung, KI-Technologie mit menschlicher Unterstützung, und Tests während des Entwicklungsprozesses, um den Weg zur Barrierefreiheit zu vereinfachen. Außerdem erhalten Sie mit AudioEye Assurance einen 400 % besseren Schutz als mit reiner Automatisierung oder Beratungsansätzen. Mit unserem umfassenden Ansatz profitieren Sie von branchenführender Einhaltung der Barrierefreiheitsgesetze und haben die Gewissheit, dass Ihre digitalen Inhalte geschützt sind.

Egal, ob Sie Ihre ersten Schritte in Richtung WCAG-Konformität gehen oder die Barrierefreiheit Ihrer Website weiter verbessern möchten – AudioEye bietet Ihnen die Tools, das Fachwissen und die kontinuierliche Unterstützung, die Sie benötigen, um ein barrierefreies digitales Erlebnis zu schaffen – und es langfristig zu erhalten.

Bereit loszulegen? Nutzen Sie unseren kostenlosen Website Accessibility Checker und prüfen Sie, wie barrierefrei Ihre bestehenden Inhalte sind.

Möchten Sie AudioEye in Aktion sehen? Vereinbaren Sie noch heute eine Demo.

Häufig gestellte Fragen

Welche WCAG-Versionen gibt es?

Welche WCAG-Stufen gibt es?

Was ist die aktuellste WCAG-Version?

Wann erscheint WCAG 3.0?

Was sind die vier Prinzipien der WCAG?

Was sind die Folgen einer Nicht-Konformität mit WCAG?

Artikel teilen