Zum Inhalt springen
Eine minimalistisch illustrierte lächelnde Person lehnt sich über mehrere Browser- oder Programmfenster, die nebeneinander angeordnet sind. Die Fenster enthalten jeweils rechteckige Contentbereiche. Die Illustration ist im einfachen Linienstil gehalten und vermittelt eine Situation des Vergleichens oder Organisierens von digitalen Inhalten.

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 Kriterien der Web Content Accessibility Guidelines (WCAG 2.2) in den Konformitätsleveln A und AA aufgegriffen. Gekennzeichnete Kontrollpunkte gehen auf das höhere Level AAA ein. Wichtig: Diese Checkliste ersetzt keine kompletten Audits. Sie gibt einen Überblick über die gröbsten Aspekte.

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.

Hinweis: Das unter anderem gefragte Kontrastverhältnis zweier Farben lässt sich mit diesem Werkzeug bestimmen: Kontrastrechner für Farben.

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?
Projekt anfragen

Gestaltung

  • Informationen werden nicht alleine durch Farben vermittelt.
  • Das Kontrastverhältnis der Schriftfarbe zur Hintergrundfarbe ist mindestens 4,5:1 (Level AA) beziehungsweise 7:1 (Level AAA).
  • 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) beziehungsweise 4,5:1 (Level AAA).
  • Der Text ist als Flattersatz links- oder rechtsbündig ausgerichtet.
  • Die Zeilenlänge beträgt nicht mehr als 80 Zeichen.
  • Vorder- und Hintergrundfarben können gewechselt werden.
  • Der Zeilenabstand ist mindestens 1,5-fach innerhalb von Absätzen und der Absatzabstand ist mindestens 1,5-fach so groß wie der Zeilenabstand.

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">.
  • Eine Version in leichter Sprache wird angeboten.
  • Fachtermini oder nicht eindeutige Begriffe sind in einem Glossar, einer Definitionsliste oder etwas Ähnlichem deklariert.
  • Abkürzungen werden das erste Mal ausgeschrieben oder beispielsweise mit dem <abbr>-Element erklärt. Wenn die Aussprache eines Wortes von entscheidender Bedeutung ist, folgt die Aussprache direkt nach dem Wort, über einen Link oder ein Glossar.

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.
  • Überschriften leiten alle Inhaltsabschnitte ein (nur Level AAA).
  • 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.
  • Frames und Iframes sind entsprechend betitelt.
  • 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 fünf 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, Anwender*innen 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 Anwender*innen eine Eingabe tätigen, ohne dass dies vorher angekündigt wurde.
  • Eine Veränderung des Kontextes erfolgt nur durch eine Bestätigung (nur Level AAA).
  • Webseiten enthalten nichts, was öfter als dreimal in einer Sekunde blitzt oder der Blitz ist innerhalb eines Grenzwerts für Blitze.
  • Webseiten enthalten nichts, was öfter als dreimal in einer Sekunde blitzt (nur Level AAA).

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.
  • Wenn die Sitzung ausläuft, können Anwender*innen nach einer erneuten Anmeldung ihre Aktivität ohne Datenverlust fortführen (nur Level AAA).
  • Anwender*innen 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.
  • Es gibt Hilfen, wenn bestimmte Eingaben beziehungsweise Eingaben in einem bestimmten Format erfolgen müssen (nur bei Level AAA).

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.
  • Anwender*innen 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.