Zum Inhalt springen
Eine Lupe

Illustration eines lächelnden Mannes, der sich über ein großes Bildschirmfenster mit drei gelben Rechtecken lehnt

Einfache Checkliste für barrierefreie Websites

Schritt für Schritt zur Barrierefreiheit: Diese Checkliste gibt einen schnellen Überblick darüber, wie es um die Barrierefreiheit Ihrer Website steht. Dabei werden Erfolgskriterien der Web Content Accessibility Guidelines (WCAG 2.2) in den Konformitätsleveln A und AA aufgegriffen.

Wichtig: Die Checkliste bildet ausgewählte, besonders relevante Erfolgskriterien ab – sie ist also ein bewusst unvollständiger Auszug. Sie ersetzt keine umfassende Prüfung, bietet keine Rechtssicherheit und garantiert keine vollständige Barrierefreiheit. Dafür ist sie niederschwellig, praxisnah und kann zum Beispiel bei Ausschreibungen als Orientierung dienen. Sie können stattdessen auch zur Checkliste mit allen Erfolgskriterien der WCAG 2.2 greifen.

Sie können die Kontrollpunkte interaktiv abhaken. Die Eingaben werden datenschutzfreundlich als lokale Daten in Ihrem Browser gespeichert, sodass sie bei Ihrem nächsten Besuch fortgeführt werden können.

Der Quick-Check für Ihre Website

Gerne können wir die Checkliste anhand Ihrer Website gemeinsam durchgehen. Das ist im ersten Schritt häufig sinnvoller als ein kompletter BITV-/WCAG-Test, weil viele Websites grundlegendste Kriterien nicht erfüllen. In der Praxis ist es sinnvoll, die größten Barrieren vorher zu identifizieren und Lösungen zu prüfen:

  • Welche »Quick-Wins« liegen auf der Hand?
  • Welche größeren Barrieren können zu welchem Aufwand in welcher Priorität gelöst werden?
  • Inwiefern taugen die technischen Bedingungen überhaupt für eine Optimierung?
Mehr zu barrierefreien Websites

Gestaltung

  • Das Kontrastverhältnis der Schriftfarbe zur Hintergrundfarbe ist mindestens 4,5:1 (Level AA) (zum Kontrastrechner).

  • Das Kontrastverhältnis der Schriftfarbe von großer Schrift (ab 18 Punkt oder 14 Punkt in fett) und der Hintergrundfarbe ist mindestens 3:1 (Level AA).

  • Schaltflächen, Links und andere Bedienelemente sind mindestens 24 × 24 CSS-Pixel groß. Sind sie kleiner, haben sie so viel Abstand zueinander, dass ein gedachter Kreis von 24 Pixeln Durchmesser um jedes Ziel kein anderes Ziel überlappt. Ausgenommen sind unter anderem Links im Fließtext.

Sprache

  • Die Sprache ist als Attribut im HTML-Element angegeben, beispielsweise so: <html lang="de">.

  • Eine andere Sprache ist als Attribut angegeben, beispielsweise so beim Blockquote-Element: <blockquote lang="es">.

Seitenstruktur

  • Die Elemente im HTML-Quelltext haben eine logische Reihenfolge, sodass sie unter anderem für Screenreader nachvollziehbar wiedergegeben werden können.

  • Es entsteht keine inhaltliche Verwirrung durch positionierte Elemente mit CSS.

  • Die Überschriften vermitteln und gliedern die Struktur der Website.

  • Die Überschriften sind mit dem Überschriften-Element (h1, h2, h3 …) im HTML-Quelltext ausgezeichnet.

  • Aufzählungen sind im HTML-Quelltext als Listen (ul, ol, dl) formatiert.

  • Zitate werden als <blockquote>- und <cite>-Elemente im HTML-Quelltext eingebunden.

  • Datentabellen sind zum Beispiel mit Spalten-, Zeilen- und Tabellenüberschriften gekennzeichnet. Die Inhalte werden linearisiert.

  • Die Lesbarkeit und Funktionalität bleiben erhalten, wenn die Inhalte um 200% skaliert angezeigt werden oder lediglich mit einer Breite von 320 Pixeln präsentiert werden. In der Regel braucht es dafür ein responsives Design.

  • Der HTML-Quelltext ist standardkonform und fehlerfrei.

  • Generierte und selbst programmierte Inhalte werden so ausgezeichnet, dass die Barrierefreiheit unterstützt wird.

Multimedia und Interaktives

  • Bildelemente werden über das alt-Attribut passend mit einem alternativen Text beschrieben (zum KI-Generator für Alt-Texte).

  • Wenn der alternative Text nicht ausreicht, um die relevanten Inhalte wiederzugeben, wird eine lange Beschreibung bereitgestellt und im alternativen Text darauf verwiesen.

  • Bilder und Grafiken, die lediglich dekorativ sind, enthalten ein leeres alt-Attribut oder werden via CSS als Hintergrund eingebunden.

  • Für Inhalte wird Text anstelle von Schriftgrafiken eingesetzt (Logos ausgenommen).

  • Ein Transkript für relevante Audio-Inhalte von Mp3-Dateien, Podcasts etc. wird bereitgestellt.

  • Videos, Webcasts, Webkonferenzen, Audio-Broadcasts, Videostreams etc. sind synchron untertitelt.

  • Für Videos werden Audiobeschreibungen bereitgestellt, sofern relevante Inhalte in dem Video allein visuell verständlich sind.

  • Automatisch blinkende oder bewegende Inhalte (wie beispielsweise Laufschriften und Slideshows) können pausiert, gestoppt oder ausgeblendet werden, wenn sie mehr als 5 Sekunden anhalten.

  • Automatisch aktualisierender Inhalt wie bei Newsticker, Chatnachrichten etc. kann pausiert, gestoppt, ausgeblendet oder manuell kontrolliert werden.

  • Es gibt keine Zeitlimitierung, es sei denn, Nutzende können die zeitliche Begrenzung abschalten oder anpassen, bevor sie darauf treffen.

  • Wenn Audio- und Video-Inhalte automatisch länger als drei Sekunden abspielen, gibt es einen Stoppschalter.

  • Der Inhalt verändert sich nicht, wenn er fokussiert wird.

  • Der Inhalt verändert sich nicht automatisch, wenn Nutzende eine Eingabe tätigen, ohne dass dies vorher angekündigt wurde.

  • Webseiten enthalten nichts, was öfter als dreimal in einer Sekunde blitzt oder der Blitz ist innerhalb eines Grenzwerts für Blitze.

  • Funktionen, die durch Ziehen bedient werden (Schieberegler, Drag-and-drop, verschiebbare Kartenausschnitte), lassen sich alternativ mit einem einfachen Klick oder Tipp bedienen. Ausgenommen sind Fälle, in denen das Ziehen für die Funktion unverzichtbar ist.

Formulare

  • Formularfelder sind mit einer sinngebenden Beschriftung im <label>-Element verknüpft. Sogenannte »Placeholder«/Platzhalter-Texte innerhalb der Formularfelder sind keine Beschriftungen.

  • Mehrteilige Formulare bestehen aus inhaltlich zusammengehörigen Gruppen mit dem <fieldset>-Element im HTML-Quelltext.

  • Auf grafische Captchas wird verzichtet oder eine Alternative bereitgestellt.

  • Angaben, die Nutzende im selben Vorgang bereits gemacht haben, müssen nicht erneut eingegeben werden. Sie werden vorausgefüllt oder stehen zur Auswahl. Ausgenommen sind Sicherheitsabfragen wie die Bestätigung eines Passworts.

  • Automatisch erkannte Eingabefehler geben in einer schriftlichen Fehlermeldung einen klaren Hinweis auf das fehlerhafte Element.

  • Beschriftungen oder Hinweise sind angegeben, wenn Eingaben erwartet werden.

  • Korrekturempfehlungen werden angegeben, wenn falsche Benutzereingaben erfolgen.

  • Eingaben, die rechtliche oder finanzielle Folgen haben, müssen vor dem Absenden überprüft, geändert, gelöscht oder bestätigt werden können.

  • Für die Anmeldung ist kein kognitiver Test erforderlich: kein Auswendiglernen von Passwörtern, kein Rätsel, keine Rechenaufgabe. Passwortmanager funktionieren, und das Einfügen aus der Zwischenablage wird nicht blockiert.

Navigation

  • Die Navigation ist innerhalb der Webseite gleichbleibend angeordnet und aufgebaut.

  • Elemente mit gleicher Funktion bleiben innerhalb der Webseite gleich.

  • Sich wiederholende Elemente sind gruppiert oder durch Überschriften ausgezeichnet und können mit Sprungmarken übergangen werden.

  • Die Fokus-Reihenfolge der Links in der Navigation und im Inhalt ist logisch.

  • Linktexte sind aus selbst heraus oder aus dem Kontext heraus verständlich.

  • Wenn es Hilfsangebote gibt (Kontaktdaten, Kontaktformular, Chat oder eine Hilfeseite), stehen sie auf allen Seiten an derselben Stelle und in derselben Reihenfolge.

  • Es gibt mindestens eine Methode zusätzlich zur Navigation, um auf Inhalte zuzugreifen: Eine Suchfunktion und/oder ein Inhaltsverzeichnis.

  • Es gibt keine optischen oder akustischen Anweisungen wie »Den roten Schalter betätigen«.

  • Alle Seitenfunktionalitäten und -elemente, Formularfelder, Kontrollelemente und Schalter sind über die Tabulatortaste erreichbar.

  • Elemente im Fokus-Zustand werden bei Ansteuerung mit der Tastatur gekennzeichnet.

  • Für die Bedienung ist keine bestimmte Zeiteinteilung für einzelne Tastenanschläge erforderlich.

  • Der Tastaturfokus ist bei keinem Element der Webseite blockiert.

  • Nutzende können jedes Element mit der Tastatur ansteuern und verlassen.

  • Der Nutzende wird informiert, wenn andere Tastaturtasten als die gebräuchlichen Tabulator- oder Pfeiltasten verwendet werden.

  • Sprungmarken werden beim »Antabben«, dem Navigieren mit der Tabulator-Taste, sichtbar.

  • Das fokussierte Element wird nicht vollständig verdeckt, etwa durch eine mitlaufende Kopfzeile, ein Cookie-Banner oder ein Chat-Fenster.

Alles abgehakt?

Perfekt! Diese Checkliste für barrierefreie Websites kann in dieser Kürze die europäische Norm EN 301 549 bzw. die WCAG nicht vollständig abbilden. Ferner sind die Kriterien der WCAG auch als Mindestanforderung für die jeweilige Konformitätsstufe zu verstehen, nicht als Garantie der Barrierefreiheit. Aber: Die gröbsten Barrieren sind damit wahrscheinlich vermieden.