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.1 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.

Professionelle Begleitung

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?
Zum Kompakttest

Gestaltung

  • Informationen werden nicht alleine durch Farben vermittelt.

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

  • 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).

Sprache

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

  • Die Sprache ist als Attribut bei Zitaten im Blockquote-Element angegeben, beispielsweise so: <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 dem Überschriften-Element (h1, h2, h3 …) im HTML-Quelltext ausgezeichnet.

  • Aufzählungen sind in dem 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 bleibt 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.

  • 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, sind über das aria-hidden-Attribut ausgeblendet 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.

  • Sprachwiedergaben haben keine oder sehr leise Hintergrundgeräusche oder diese lassen sich abschalten.

  • 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.

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.

  • Nutzende werden gewarnt, wenn eine Unterbrechung zum Datenverlust ihrer Eingaben führen könnte, sofern die Eingaben nicht für mindestens 20 Stunden Inaktivität erhalten bleiben.

  • 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 Benutzereingabe 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.

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.

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

  • 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 Tastanschläge erforderlich.

  • Der Tastaturfokus ist bei keinem Element der Webseite blockiert.

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

  • Der Benutzer 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.

Alles abgehakt?

Fantastisch! Diese Checkliste 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.