Prüfschritte der WCAG & BITV im Überblick

Damit eine Website vollständig barrierefrei umgesetzt werden kann, müssen alle Prüfschritte der BITV bzw. WCAG fehlerfrei durchlaufen werden. Die WCAG sind internationale Richtlinien, die spezifische Empfehlungen zur Barrierefreiheit von Webinhalten geben. Die BITV basiert auf der WCAG und erweitert diese in Teilen. Daher kommt es vor, dass zu einem WCAG-Prüfkriterium mehrere BITV-Kriterien aufgeführt sind. Die BITV ist teils konkreter formuliert und reduziert somit einige Grauzonen.

Bei der Prüfung bzw. Erstellung barrierefreier Websites benötigen wir diese Richtlinien regelmäßig. Da die offiziellen Quellen unübersichtlich sind, haben wir die folgende Zusammenfassung erstellt. Alle Prüfschritte werden kurz erklärt, es wird das jeweilige Konformitätslevel (A bzw. AA) anzeigt, die Verlinkung zur offiziellen Quelle in WCAG und BITV bereitstellt und angezeigt für welches Gewerk (Design, Entwicklung, Redaktion) der Prüfschritt relevant ist.

Prinzip 1 – Wahrnehmbar

Webinhalte müssen so präsentiert werden, dass sie von den Sinnen der Nutzer wahrgenommen werden können.

1.1 Textalternativen

Bereitstellung von Textalternativen für nicht-textuelle Inhalte.

1.1.1 Nicht-Text-Inhalte (A)

Alle Nicht-Text-Inhalte müssen eine Textalternative haben, die denselben Zweck erfüllt, außer in bestimmten Ausnahmefällen.

1.2 Zeitbasierte Medien

Bereitstellung von Alternativen für zeitabhängige Medien.

1.2.1 Nur-Audio und Nur-Video (vorab aufgezeichnet) (A)

Bereitstellung einer Alternative für zeitbasierte Medien, die äquivalente Informationen für vorab aufgezeichnete Audio- und Videoinhalte bietet.

1.2.2 Untertitel (vorab aufgezeichnet) (A)

Bereitstellung von Untertiteln für alle vorab aufgezeichneten Audioinhalte in synchronisierten Medien.

1.2.3 Audiodeskription oder Medienalternative (vorab aufgezeichnet) (A)

Bereitstellung einer Audiodeskription oder einer Medienalternative für vorab aufgezeichnete Videoinhalte in synchronisierten Medien.

1.2.4 Untertitel (live) (AA)

Bereitstellung von Untertiteln für alle Live-Audioinhalte in synchronisierten Medien.

1.2.5 Audiodeskription (vorab aufgezeichnet) (AA)

Bereitstellung einer Audiodeskription für alle vorab aufgezeichneten Videoinhalte in synchronisierten Medien.

1.3 Anpassbar

Erstellung von Inhalten, die auf unterschiedliche Weise dargestellt werden können, ohne an Informationen oder Struktur zu verlieren.

1.3.1 Informationen und Beziehungen (A)

Informationen, Struktur und Beziehungen, die durch die Präsentation vermittelt werden, können programmatisch bestimmt oder in Text verfügbar gemacht werden.

1.3.2 Sinnvolle Reihenfolge (A)

Inhalte werden in einer sinnvollen Reihenfolge präsentiert, die die Bedeutung bewahrt und die Nutzbarkeit verbessert.

1.3.3 Sensorische Merkmale (A)

Anweisungen dürfen nicht ausschließlich sensorische Merkmale wie Form, Farbe oder Position verwenden, um Informationen zu vermitteln.

1.3.4 Ausrichtung (Orientation) (AA)

Webinhalte dürfen nicht auf eine Display-Orientierung wie Hochformat oder Querformat beschränkt sein, es sei denn, eine spezifische Display-Ausrichtung ist unverzichtbar.

1.3.5 Eingabezweck identifizieren (AA)

Der Zweck jedes Eingabefelds, das Informationen über den Benutzer sammelt, kann programmatisch bestimmt werden.

1.4 Unterscheidbar

Erleichterung der Unterscheidung von Inhalten und deren Trennung vom Hintergrund.

1.4.1 Ohne Farben nutzbar (A)

Farbe wird nicht als einziges visuelles Mittel verwendet, um Informationen zu vermitteln, eine Aktion anzuzeigen, eine Antwort aufzufordern oder ein visuelles Element zu unterscheiden.

1.4.2 Ton abschaltbar (A)

Wenn eine Webseite Audio enthält, das automatisch abgespielt wird und länger als 3 Sekunden dauert, muss eine Möglichkeit vorhanden sein, den Ton zu pausieren, zu stoppen oder die Lautstärke zu regeln.

1.4.3 Kontraste von Texten ausreichend (AA)

Text und Bilder von Text haben einen Kontrastverhältnis von mindestens 4,5:1, außer bei großen Texten, rein dekorativen Inhalten und Logos.

1.4.4 Textgröße anpassen (AA)

Text kann ohne Hilfsmittel außer der Standard-Browser-Zoomfunktion auf bis zu 200% vergrößert werden, ohne dass die Inhalte oder Funktionen verloren gehen.

1.4.5 Schriftgrafiken (AA)

Text wird anstelle von Bildern von Text verwendet, außer wenn das Bild notwendig ist.

1.4.10 Inhalte brechen um (AA)

Inhalt wird so umbrochen, dass der Benutzer horizontales Scrollen bei 320 Pixel Breite nicht benötigt.

1.4.11 Kontrast von Nicht-Text-Inhalten (AA)

Grafiken und grafische Bedienelemente haben ein Kontrastverhältnis von mindestens 3:1.

1.4.12 Textabstände anpassbar (AA)

Es gibt genügend Abstand zwischen Zeilen, Absätzen, Wörtern und Buchstaben, um die Lesbarkeit zu erhöhen.

1.4.13 Eingeblendete Inhalte bedienbar (Hover oder Fokus) (AA)

Zusätzlicher Inhalt, der bei Hover oder Fokus erscheint, kann ausgeblendet werden, ohne dass die Maus bewegt wird oder die Tastatursteuerung verloren geht.

Prinzip 2 – Bedienbar

Benutzer müssen die Benutzeroberfläche bedienen und die Navigation durchführen können.

2.1 Tastaturbedienbarkeit

Sicherstellung, dass alle Funktionen über eine Tastatur zugänglich sind.

2.1.1 Ohne Maus nutzbar (A)

Alle Funktionen der Webseite sind über die Tastatur zugänglich, ohne dass eine bestimmte Tastenanschlagfolge erforderlich ist.

2.1.2 Keine Tastaturfalle (A)

Wenn ein Element den Tastaturfokus erhält, kann dieser wieder entfernt werden, ohne dass der Benutzer in einer Tastaturfalle gefangen bleibt.

2.1.4 Tastatur-Kurzbefehle abschaltbar oder anpassbar (A)

Tastatur-Kurzbefehle, die nur Buchstaben, Ziffern, Satzzeichen oder Funktionstasten verwenden, können deaktiviert, geändert oder benötigen eine Bestätigungstaste.

2.2 Ausreichend Zeit

Den Benutzern genügend Zeit zum Lesen und Verwenden von Inhalten geben.

2.2.1 Einstellbare Zeitbegrenzung (AA)

Benutzer haben genügend Zeit, um Inhalte zu lesen und zu verwenden, indem sie die Zeitbegrenzungen anpassen können.

2.2.2 Bewegte Inhalte abschaltbar (A)

Bewegte, blinkende, scrollende oder sich automatisch aktualisierende Inhalte können pausiert, gestoppt oder ausgeblendet werden.

2.3 Anfälle und physische Reaktionen

Vermeidung von Designmustern, die bei Benutzern Anfälle oder physische Reaktionen auslösen könnten.

2.3.1 Verzicht auf Flackern (A)

Webseiten dürfen keine Inhalte enthalten, die mehr als dreimal pro Sekunde blinken oder anderweitig Anfälle auslösen könnten.

2.4 Navigierbar

Unterstützung der Benutzer bei der Navigation, beim Finden von Inhalten und beim Verfolgen des aktuellen Standorts.

2.4.1 Blöcke überspringen (A)

Es gibt einen Mechanismus, um Blöcke von Inhalten zu überspringen, die auf mehreren Webseiten wiederholt werden.

2.4.2 Sinnvolle Dokumenttitel (A)

Webseiten haben Titel, die ihren Inhalt oder Zweck beschreiben.

2.4.3 Schlüssige Reihenfolge bei der Tastaturbedienung (Fokus Order) (A)

Wenn Webseiten durch eine festgelegte Reihenfolge navigiert werden, geschieht dies in einer Reihenfolge, die Sinn ergibt.

2.4.4 Aussagekräftige Linktexte (A)

Der Zweck jedes Links kann aus dem Linktext allein oder dem Linktext zusammen mit seinem Kontext bestimmt werden.

2.4.5 Alternative Zugangswege (AA)

Mindestens zwei Möglichkeiten zur Verfügung stellen, um verschiedene Unterseiten innerhalb einer Website zu finden.

2.4.6 Aussagekräftige Überschriften und Beschriftungen (AA)

Überschriften und Beschriftungen beschreiben das Thema oder den Zweck.

2.4.7 Aktuelle Position des Fokus deutlich (AA)

Jede Schnittstelle ermöglicht es dem Benutzer, den Tastaturfokus zu sehen.

2.4.11 Fokus nicht verdeckt (AA)

Wenn ein Element Tastaturfokus erhält, darf das Element nicht vollständig verdeckt werden.

2.5 Eingabehilfen

Bereitstellung von Möglichkeiten zur leichteren Bedienung von Eingabemodalitäten.

2.5.1 Alternativen für komplexe Zeiger-Gesten (A)

Alle Funktionen, die komplexe Zeiger-Gesten erfordern, können auch mit einer einfachen Zeiger-Geste ausgeführt werden.

2.5.2 Zeigereingaben abbrechen (A)

Zeigereingaben können abgebrochen oder widerrufen werden.

2.5.3 Beschriftung im Namen (A)

Die sichtbare Beschriftung ist Teil des zugänglichen Namens.

2.5.4 Alternativen für Bewegungsaktivierung (A)

Funktionen, die durch Bewegung des Geräts aktiviert werden, können auch durch Benutzeroberflächenkomponenten bedient werden und die Reaktion auf Bewegungen kann deaktiviert werden, um Fehlaktivierungen zu vermeiden.

2.5.7 Ziehbewegungen (AA)

Alle Funktionalitäten, die eine Ziehbewegung (Drag) zur Bedienung verwenden, müssen auch ohne Ziehen zugänglich sein, es sei denn, das Ziehen ist wesentlich oder wird durch den User Agent bestimmt.

2.5.8 Zielfläche (Minimum) (AA)

Die Größe der Zielfläche für Zeigereingaben muss mindestens 24 x 24 CSS-Pixel betragen (Ausnahmen sind definiert).

Prinzip 3 – Verständlich

Informationen und die Bedienung der Benutzeroberfläche müssen verständlich sein.

3.1 Lesbar

Sicherstellen, dass Textinhalte lesbar und verständlich sind.

3.1.1 Hauptsprache angegeben (A)

Die Standardsprache der Webseite ist programmatisch bestimmt.

3.1.2 Anderssprachige Wörter und Abschnitte ausgezeichnet (AA)

Die Sprache von Wörtern oder Abschnitten, die sich von der Standardsprache der Webseite unterscheiden, ist programmatisch bestimmt.

3.2 Vorhersehbar

Webseiten so gestalten, dass sie vorhersehbar sind und sich konsistent verhalten.

3.2.1 Bei Fokus keine Kontextänderung (A)

Bei Fokus erhält der Benutzer keine unerwartete Kontextänderung.

3.2.2 Bei Eingabe keine Kontextänderung (A)

Bei Eingabe erhält der Benutzer keine unerwartete Kontextänderung.

3.2.3 Konsistente Navigation (AA)

Navigationsmechanismen, die auf mehreren Webseiten wiederholt werden, erscheinen in derselben relativen Reihenfolge, es sei denn, der Benutzer initiiert eine Änderung.

3.2.4 Konsistente Bezeichnung (AA)

Komponenten, die denselben Zweck haben, sind konsistent beschriftet.

3.2.6 Konsistente Hilfe (A)

Wenn eine Webseite eine Hilfe-Funktion enthält, muss deren Platzierung auf verschiedenen Unterseiten konsistent sein, es sei denn, eine Änderung wird durch den Benutzer eingeleitet.

3.3 Unterstützung bei der Eingabe

Benutzern helfen, Fehler zu vermeiden und zu korrigieren.

3.3.1 Fehlererkennung (A)

Wenn ein Eingabefehler automatisch erkannt wird, wird der Fehler dem Benutzer in Textform beschrieben.

3.3.2 Beschriftungen oder Anweisungen (A)

Beschriftungen oder Anweisungen sind verfügbar, wenn Benutzereingaben erforderlich sind.

3.3.3 Hilfe bei Fehlern (AA)

Wenn ein Eingabefehler automatisch erkannt wird und Korrekturvorschläge verfügbar sind, werden diese dem Benutzer vorgeschlagen.

3.3.4 Fehlervermeidung wird unterstützt (AA)

Für Webseiten, die Rechts- oder Finanztransaktionen, Tests oder Datenübermittlung beinhalten, gibt es Mechanismen zur Fehlervermeidung und -korrektur.

3.3.7 Redundante Eingabe (A)

Informationen, die zuvor bereits eingegeben oder bereitgestellt wurden und für denselben Prozess erforderlich sind, müssen entweder automatisch ausgefüllt oder dem Benutzer zur Auswahl gestellt werden. Es sei denn, die erneute Eingabe ist wesentlich oder erforderlich, um die Sicherheit der Inhalte zu gewährleisten oder wenn zuvor eingegebene Informationen nicht mehr gültig sind.

3.3.8 Zugängliche Authentifizierung (Minimum) (AA)

Ein kognitiver Funktionstest (z.B. das Lösen eines Rätsels/Puzzles) darf in einem Authentifizierungsprozess nicht Voraussetzung sein (Ausnahmen sind definiert).

Prinzip 4 – Robust

Webinhalte müssen robust genug sein, um von einer Vielzahl von Benutzeragenten, einschließlich assistiver Technologien, interpretiert zu werden.

4.1 Kompatibel

Maximale Kompatibilität mit aktuellen und zukünftigen Benutzeragenten, einschließlich assistiver Technologien.

4.1.1 Parsing (A)

Inhalte sind so programmiert, dass sie von Benutzeragenten analysiert und fehlerfrei verarbeitet werden können.

4.1.2 Name, Rolle, Wert (A)

Für alle Benutzeroberflächenkomponenten (wie Formularelemente, Links und Komponenten, die über Skripte generiert werden) sind Name und Rolle programmatisch festgelegt. Zustände, Eigenschaften und Werte, die vom Benutzer festgelegt werden können, können vom Benutzerprogramm bestimmt werden. Benachrichtigungen über Änderungen dieser Elemente sind ebenfalls verfügbar.

4.1.3 Statusmeldungen programmatisch verfügbar (AA)

Statusmeldungen können programmatisch bestimmt werden durch Rollen oder Eigenschaften, so dass sie den Benutzern von unterstützenden Technologien ohne Fokuswechsel präsentiert werden können.

Relevanz: Entwicklung

WCAG: 4.1.3 Status Messages

BITV: 9.4.1.3 Statusmeldungen programmatisch verfügbar

Geschrieben von:

Jonas Hellwig

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Raimund Büchner

Benutzerbild

Raimund ist oft die erste Ansprechperson bei kulturbanause. Er kümmert sich hauptsächlich um die Betreuung und Beratung unserer bestehenden als auch künftigen Kundschaft. Ein weiterer Schwerpunkt seiner Tätigkeit liegt im Design nicht unmittelbar sichtbarer Dinge: Struktur und Inhalte. Projekte unterstützt er daher vor allem in der Anfangsphase in Bereichen wie Informationsarchitektur, UX-Design und Content Strategy.

Feedback & Ergänzungen – Schreibe einen Kommentar

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Barrierefreie Projekte mit kulturbanause

Wir setzen regelmäßig digitale Produkte barrierefrei um und kennen die Anforderungen im konzeptinellen, gestalterischen, redaktionellen und technischen Bereich.

Leistungsangebot Barrierefreiheit →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Schulung + Beratung