Checkliste Barrierefreiheit für Websites

Diese Checkliste fasst die wichtigsten Anforderungen der WCAG 2.1 Stufe AA zusammen, des Maßstabs für barrierefreie Websites in Europa. Sie ist nach den vier Grundsätzen der WCAG geordnet. In Klammern steht die Nummer des Kriteriums, falls Sie oder Ihre Agentur nachschlagen wollen.

Hinter jedem Punkt steht, wie man ihn prüft: automatisch heißt, ein Prüfprogramm findet Fehler zuverlässig; von Hand heißt, ein Mensch muss hinsehen. Wie beides geht, steht im Artikel Website auf Barrierefreiheit testen.

Wahrnehmbar

2,3 : 1zu schwach

7,1 : 1gut lesbar

Mindestens 4,5 : 1 für normalen Text

• Alternativtexte: Jedes Bild, das etwas aussagt, hat einen Text, der beschreibt, was es zeigt. Reine Schmuckbilder haben einen leeren Alternativtext, damit sie übersprungen werden (1.1.1). Ob vorhanden: automatisch. Ob sinnvoll: von Hand.
• Untertitel: Videos mit Ton haben Untertitel, reine Audioinhalte eine Abschrift (1.2.1, 1.2.2). Von Hand.
• Struktur im Code: Überschriften sind echte Überschriften in sinnvoller Reihenfolge, Listen echte Listen, Tabellen haben Kopfzeilen (1.3.1). Teils automatisch, Reihenfolge von Hand.
• Formularfelder beschriftet: Jedes Feld hat eine sichtbare Beschriftung, die mit dem Feld verknüpft ist (1.3.1, 3.3.2). Automatisch.
• Autovervollständigung: Felder für Name, E-Mail, Adresse und Telefon nennen ihren Zweck, damit der Browser sie ausfüllen kann (1.3.5). Teils automatisch.
• Nicht nur Farbe: Informationen hängen nie allein an der Farbe, etwa rote Pflichtfelder ohne Sternchen oder Text (1.4.1). Von Hand.
• Kontrast von Text: Normaler Text hat mindestens 4,5 : 1 Kontrast zum Hintergrund, großer Text (ab etwa 24 px oder 19 px fett) mindestens 3 : 1 (1.4.3). Automatisch, bei Text auf Bildern von Hand.
• Kontrast von Bedienelementen: Rahmen von Feldern, Knöpfe und Symbole haben mindestens 3 : 1 (1.4.11). Von Hand.
• Vergrößern: Bei 200 % Zoom geht nichts verloren (1.4.4), bei 400 % bricht die Seite in eine Spalte um, ohne seitliches Scrollen (1.4.10). Von Hand.
• Textabstände: Wer Zeilen- und Buchstabenabstand vergrößert, verliert keinen Text (1.4.12). Von Hand.
• Inhalte beim Überfahren: Was beim Überfahren mit der Maus erscheint, lässt sich schließen und bleibt stehen, solange man es braucht (1.4.13). Von Hand.

Bedienbar

• Tastatur: Alles lässt sich mit der Tastatur erreichen und bedienen, auch Menüs, Schieberegler und Dialoge (2.1.1). Von Hand.
• Keine Falle: Aus jedem Element kommt man mit der Tastatur wieder heraus, auch aus Cookie-Hinweisen und eingebetteten Karten (2.1.2). Von Hand.
• Genug Zeit: Zeitlimits lassen sich verlängern oder abschalten (2.2.1). Von Hand.
• Bewegung anhalten: Karussells, Laufschriften und Videos, die von selbst länger als fünf Sekunden laufen, lassen sich anhalten (2.2.2). Von Hand.
• Kein Flackern: Nichts blinkt öfter als dreimal pro Sekunde (2.3.1). Von Hand.
• Zum Inhalt springen: Ein Link am Anfang führt am Menü vorbei direkt zum Inhalt (2.4.1). Teils automatisch.
• Seitentitel: Jede Seite hat einen eigenen, aussagekräftigen Titel (2.4.2). Automatisch vorhanden, Aussage von Hand.
• Fokus-Reihenfolge: Mit Tab springt man in einer sinnvollen Reihenfolge durch die Seite (2.4.3). Von Hand.
• Linktexte: Aus dem Linktext und seinem Umfeld geht hervor, wohin der Link führt; kein „hier klicken“ ohne Zusammenhang (2.4.4). Teils automatisch.
• Mehrere Wege: Seiten sind auf mehr als einem Weg zu finden, etwa über Menü und Suche oder Sitemap (2.4.5). Von Hand.
• Überschriften und Beschriftungen: Sie beschreiben, worum es geht (2.4.6). Von Hand.
• Sichtbarer Fokus: Man sieht immer, welches Element gerade aktiv ist (2.4.7). Von Hand.
• Sichtbarer Name = gesprochener Name: Was auf einem Knopf steht, steckt auch in seinem Namen für Hilfsmittel (2.5.3). Teils automatisch.

Verständlich

• Sprache der Seite: Die Sprache ist im Code angegeben (3.1.1), Abschnitte in einer anderen Sprache ebenfalls (3.1.2). Automatisch, Abschnitte von Hand.
• Keine Überraschungen: Ein Feld auszufüllen oder auszuwählen löst nicht ungefragt einen Seitenwechsel aus (3.2.1, 3.2.2). Von Hand.
• Einheitliche Bedienung: Menü und wiederkehrende Elemente stehen auf allen Seiten an derselben Stelle und heißen gleich (3.2.3, 3.2.4). Von Hand.
• Fehler erkennen: Fehler in Formularen werden als Text genannt, beim richtigen Feld, mit einem Vorschlag zur Korrektur (3.3.1, 3.3.3). Von Hand.
• Vor dem Absenden prüfen: Bei Bestellungen, Verträgen und rechtlich wirksamen Angaben kann man vor dem Absenden prüfen, korrigieren oder zurücknehmen (3.3.4). Von Hand.

Robust

• Namen, Rollen, Werte: Knöpfe, Links, Felder und eigene Bedienelemente haben einen Namen und eine Rolle, die Hilfsmittel lesen können; ihr Zustand (offen, gewählt) wird mitgeteilt (4.1.2). Automatisch.
• Statusmeldungen: Meldungen wie „In den Warenkorb gelegt“ oder „3 Ergebnisse“ werden vorgelesen, ohne dass der Fokus springt (4.1.3). Von Hand.
• Sauberer Code: keine doppelten IDs, richtig verschachtelte Elemente (4.1.1, in WCAG 2.2 entfallen). Automatisch.

Was oft vergessen wird

• PDFs und Dokumente zum Herunterladen müssen ebenfalls zugänglich sein, oder es gibt die Inhalte zusätzlich als Webseite.
• Eingebundene Dienste wie Buchungssysteme, Karten, Chat-Fenster und Cookie-Hinweise gehören zu Ihrer Website. Fragen Sie den Anbieter nach seiner Barrierefreiheit.
• Neue Inhalte: Wer Texte und Bilder einstellt, braucht eine kurze Anleitung zu Alternativtexten, Überschriften und Linktexten.

Wie Sie die Liste nutzen

Lassen Sie zuerst eine automatische Prüfung über alle Seiten laufen: Sie erledigt die Punkte mit „automatisch“ in Minuten und zeigt die Stellen im Code. Gehen Sie dann die Punkte mit „von Hand“ auf Ihren wichtigsten Seiten durch. Was Sie gefunden haben und was noch offen ist, gehört in Ihre Erklärung zur Barrierefreiheit.

Diese Checkliste ist eine Übersicht und keine Rechtsberatung.