Barrierefreie Website: Die Checkliste für Design, Redaktion und Entwicklung

Die meisten Checklisten zur Barrierefreiheit sind nach den vier Prinzipien der WCAG sortiert: wahrnehmbar, bedienbar, verständlich, robust. Das ist die Logik der Norm. Mit der Logik eines Betriebs hat sie wenig zu tun. Um eine Unternehmenswebsite kümmern sich im Mittelstand meist drei verschiedene Leute: jemand gestaltet, jemand schreibt, jemand programmiert. Oft sind es sogar drei verschiedene Firmen. Eine Liste, in der Kontrast, Alternativtext und Tastatur-Fokus direkt untereinander stehen, landet deshalb bei niemandem vollständig auf dem Tisch.

Diese Checkliste sortiert nach Zuständigkeit. Jeder Punkt hat drei Angaben: womit Sie ihn prüfen, woran Sie einen Fehler erkennen und welches WCAG-Kriterium dahintersteht. Wer überhaupt betroffen ist und was das Gesetz verlangt, klärt der Pillar Barrierefreie Website: Was das BFSG verlangt. Hier geht es um die Arbeit selbst.

Was bedeutet „WCAG 2.1 AA“ konkret?

Kurz gesagt: 50 Prüfkriterien. Die WCAG 2.1 enthalten insgesamt 78 Erfolgskriterien auf drei Stufen. 30 davon gehören zu Stufe A, 20 zu Stufe AA und 28 zu Stufe AAA. „Konform auf Stufe AA“ heißt, dass alle Kriterien der Stufen A und AA erfüllt sind, also 50. Stufe AAA verlangt niemand.

Das Barrierefreiheitsstärkungsgesetz nennt die WCAG nicht selbst. Es verweist über seine Verordnung auf die europäische Norm EN 301 549, und die übernimmt für Webinhalte in Kapitel 9 genau diese 50 Kriterien. Seit dem 28. Juni 2025 gilt das für Unternehmen, die Dienstleistungen im elektronischen Geschäftsverkehr an Verbraucher anbieten. Kleinstunternehmen mit weniger als zehn Beschäftigten und höchstens zwei Millionen Euro Jahresumsatz sind bei Dienstleistungen ausgenommen. Bei Verstößen sind Bußgelder bis 100.000 Euro möglich.

Die folgenden 26 Punkte bilden nicht jedes der 50 Kriterien einzeln ab. Einige betreffen nur Sonderfälle, etwa Zeitlimits bei Online-Formularen oder die Steuerung über Handybewegungen. Die Liste deckt aber die Stellen ab, an denen Unternehmenswebsites in der Praxis hängen bleiben.

Design: acht Punkte für Gestaltung und Markenfarben

Diese Punkte entscheiden sich im Layout, lange bevor eine Zeile Code entsteht. Wer sie im Entwurf übersieht, bezahlt später doppelt, weil Farben, Abstände und Komponenten dann nachträglich geändert werden müssen. Bei einem Website-Relaunch gehören sie deshalb ins Briefing, nicht erst in die Abnahme.

1. Textkontrast (1.4.3). Prüfen: mit dem Colour Contrast Analyser oder der Kontrastanzeige in den Entwicklertools des Browsers. Durchgefallen, wenn: normaler Text unter 4,5:1 liegt, großer Text (ab 24 px, fett ab 18,66 px) unter 3:1. Die häufigsten Fälle sind hellgrauer Fließtext auf Weiß und weiße Schrift auf der Markenfarbe.
2. Kontrast von Bedienelementen (1.4.11). Prüfen: wie oben, aber am Rahmen von Eingabefeldern, an Icons und an Checkboxen. Durchgefallen, wenn: der Kontrast zum Hintergrund unter 3:1 liegt. Ein zartgrauer Formularrahmen auf Weiß fällt fast immer durch.
3. Farbe als einziges Signal (1.4.1). Prüfen: die Seite in Graustufen ansehen, per Browser-Erweiterung oder Bildschirmfilter. Durchgefallen, wenn: Links im Fließtext nur farbig und nicht unterstrichen sind, Pflichtfelder nur rot markiert werden oder sich Linien in einem Diagramm nur durch die Farbe unterscheiden.
4. Sichtbarer Fokus (2.4.7). Prüfen: mit der Tab-Taste durch die Seite gehen. Durchgefallen, wenn: Sie irgendwo nicht mehr sehen, wo Sie gerade sind. Die Ursache ist oft eine einzige Zeile im Stylesheet, die den Fokusrahmen des Browsers entfernt, weil er als unschön galt.
5. Umbruch bei 320 Pixeln (1.4.10). Prüfen: Browserfenster auf 1.280 Pixel Breite stellen und auf 400 % zoomen. Das entspricht 320 Pixeln. Durchgefallen, wenn: Sie für normalen Text waagerecht scrollen müssen. Ausgenommen sind nur Inhalte, die zweidimensional sein müssen, etwa große Datentabellen oder Karten.
6. Text auf 200 % vergrößerbar (1.4.4). Prüfen: Browser-Zoom auf 200 % stellen. Durchgefallen, wenn: Text abgeschnitten wird, sich überlappt oder Buttons nicht mehr bedienbar sind.
7. Textabstände (1.4.12). Prüfen: ein Bookmarklet für „Text Spacing“ setzt Zeilenhöhe 1,5, doppelten Absatzabstand, Zeichenabstand 0,12 und Wortabstand 0,16 der Schriftgröße. Durchgefallen, wenn: Text aus Kästen herausläuft oder abgeschnitten wird. Das betrifft vor allem Buttons und Karten mit fester Höhe.
8. Inhalte bei Hover und Fokus (1.4.13). Prüfen: Tooltips und Aufklappmenüs mit Maus und Tastatur öffnen. Durchgefallen, wenn: sie sich nicht mit Escape schließen lassen, verschwinden, sobald die Maus hineinfährt, oder sich von selbst wieder schließen.

Die Markenfarbe ist dabei selten das Problem, eher ihre Verwendung. Ein kräftiges Blau funktioniert als Hintergrund für weiße Schrift oft gut, als Schriftfarbe auf Dunkelgrau dagegen nicht. Messen Sie jede Kombination einzeln, nicht die Farbe an sich.

Redaktion: acht Punkte für alle, die Inhalte einpflegen

Diese Punkte entstehen jeden Tag neu, mit jedem Blogartikel und jedem Produktbild. Man behebt sie nicht einmal, man hält sie durch Gewohnheit. Die Liste gehört deshalb in die Einarbeitung neuer Mitarbeiter, nicht in einen Projektordner.

1. Alternativtexte (1.1.1). Prüfen: WAVE zeigt jedes Bild mit seinem Alternativtext direkt auf der Seite an. Durchgefallen, wenn: informative Bilder keinen Alternativtext haben, ein Dateiname wie „IMG_4711.jpg“ dort steht oder rein dekorative Bilder beschrieben werden, statt ein leeres alt="" zu bekommen. Bei einem Referenzfoto aus dem Glasbau reicht „Glasfassade“ nicht. Besser: „Rahmenlose Ganzglas-Trennwand im Besprechungsraum, mit Glastür“.
2. Überschriften-Hierarchie (1.3.1, 2.4.6). Prüfen: WAVE oder die Browser-Erweiterung HeadingsMap zeigen die Gliederung der Seite. Durchgefallen, wenn: Ebenen übersprungen werden (H2 direkt zu H4), es mehrere H1 gibt oder fett formatierter Fließtext nur so aussieht wie eine Überschrift.
3. Linktexte (2.4.4). Prüfen: die Linkliste eines Screenreaders aufrufen (bei NVDA: Einfügen+F7) oder alle Links einer Seite der Reihe nach lesen. Durchgefallen, wenn: Links „hier klicken“, „mehr“ oder „weiterlesen“ heißen. In der Linkliste stehen dann zehnmal „mehr“ untereinander, ohne Hinweis, wohin sie führen.
4. Sprache der Seite und einzelner Passagen (3.1.1, 3.1.2). Prüfen: im Quelltext steht lang="de", englische Zitate und Fachbegriffe haben eine eigene Sprachangabe. Durchgefallen, wenn: die Angabe fehlt. Der Screenreader liest dann deutschen Text mit englischer Aussprache vor, oder umgekehrt.
5. Untertitel für Videos (1.2.2). Prüfen: das Video ohne Ton abspielen. Durchgefallen, wenn: gesprochener Inhalt nicht mitzulesen ist. Automatisch erzeugte Untertitel zählen nur, wenn jemand sie korrigiert hat. Gerade Fachbegriffe werden sonst falsch erkannt.
6. Audiodeskription (1.2.5). Prüfen: das Video ohne Bild anhören. Durchgefallen, wenn: wichtige Informationen nur zu sehen sind, etwa eine eingeblendete Telefonnummer oder ein Arbeitsschritt ohne Kommentar. Oft genügt es, im Video auszusprechen, was gezeigt wird.
7. Keine Sinnesmerkmale als einzige Anleitung (1.3.3). Prüfen: Texte nach Formulierungen wie „rechts“, „unten“ oder „der grüne Button“ durchsuchen. Durchgefallen, wenn: eine Anweisung nur funktioniert, wenn man die Seite sieht.
8. Seitentitel (2.4.2). Prüfen: den Titel im Browser-Tab oder im Suchergebnis lesen. Durchgefallen, wenn: mehrere Seiten denselben Titel tragen oder er nichts über den Inhalt sagt. Der Titel ist das Erste, was ein Screenreader beim Öffnen vorliest.

Ein Punkt fehlt hier bewusst: Dokumente zum Download. PDFs sind Inhalte der Website und fallen unter dieselben Anforderungen, haben aber eigene Regeln. Welche Dokumente überhaupt betroffen sind und was dort zu prüfen ist, steht im Artikel Barrierefreies PDF: Pflicht, Umsetzung, Aufwand.

Entwicklung: zehn Punkte für Technik und Formulare

Diese Punkte sieht man einer Seite nicht an. Eine Website kann tadellos aussehen und für jemanden, der nur mit Tastatur oder Screenreader arbeitet, trotzdem an der ersten Stelle enden. Gerade das Kontaktformular ist der Ort, an dem ein Unternehmen Anfragen verliert, ohne es je zu merken.

1. Alles per Tastatur bedienbar (2.1.1). Prüfen: Maus weglegen und mit Tab, Umschalt+Tab, Enter, Leertaste und Pfeiltasten die wichtigsten Wege gehen: Menü, Kontaktformular, Cookie-Banner. Durchgefallen, wenn: ein Element nicht erreichbar oder nicht auslösbar ist. Der Klassiker sind Aufklappmenüs, die nur auf die Mausbewegung reagieren.
2. Keine Tastaturfalle (2.1.2). Prüfen: wie oben. Durchgefallen, wenn: Sie aus einem Element nicht mehr herauskommen. Typisch bei eingebetteten Karten, Video-Playern und Chat-Fenstern.
3. Sinnvolle Fokus-Reihenfolge (2.4.3). Prüfen: Tab-Taste und dabei beobachten, wohin der Fokus springt. Durchgefallen, wenn: er quer über die Seite springt, weil die Reihenfolge im Code nicht zur sichtbaren passt.
4. Sprunglink und Seitenbereiche (2.4.1). Prüfen: direkt nach dem Laden einmal die Tab-Taste drücken. Durchgefallen, wenn: kein Link „Zum Inhalt springen“ erscheint und die Seite keine Bereiche wie header, nav, main und footer auszeichnet. Wer mit Tastatur arbeitet, muss sich dann auf jeder Seite erst durch das komplette Menü tippen.
5. Formularfelder mit Beschriftung (3.3.2, 1.3.1). Prüfen: auf die Beschriftung eines Feldes klicken. Der Cursor muss ins Feld springen. Durchgefallen, wenn: Feldnamen nur als grauer Platzhaltertext im Feld stehen und beim Tippen verschwinden.
6. Fehlermeldungen, die helfen (3.3.1, 3.3.3). Prüfen: das Formular absichtlich falsch ausfüllen und absenden. Durchgefallen, wenn: nur ein roter Rahmen erscheint, keine Meldung in Textform, oder die Meldung nicht sagt, was falsch ist und wie es richtig geht.
7. Eingabezweck angeben (1.3.5). Prüfen: im Quelltext der Formularfelder nach autocomplete suchen. Durchgefallen, wenn: Name, E-Mail und Telefon keine Angabe wie autocomplete="email" haben. Ohne sie kann der Browser nicht vorausfüllen. Das nimmt Menschen mit motorischen oder kognitiven Einschränkungen viel Tipparbeit ab.
8. Name, Rolle, Wert (4.1.2). Prüfen: axe DevTools oder WAVE, danach mit einem Screenreader gegenhören: NVDA unter Windows (kostenlos) oder VoiceOver auf Mac und iPhone (eingebaut). Durchgefallen, wenn: Buttons keinen zugänglichen Namen haben, etwa ein Lupensymbol ohne Text, oder Aufklapp-Elemente nicht mitteilen, ob sie offen oder geschlossen sind.
9. Statusmeldungen (4.1.3). Prüfen: das Formular mit laufendem Screenreader absenden. Durchgefallen, wenn: „Vielen Dank, Ihre Nachricht wurde gesendet“ auf dem Bildschirm erscheint, aber nicht vorgelesen wird.
10. Bewegung anhalten (2.2.2). Prüfen: automatisch laufende Slider, Laufschriften und Hintergrundvideos suchen. Durchgefallen, wenn: sich Bewegung, die länger als fünf Sekunden läuft, nicht pausieren oder stoppen lässt.

Womit Sie prüfen und was die Werkzeuge übersehen

Für einen ersten Durchgang reichen kostenlose Werkzeuge:

• WAVE (WebAIM): Browser-Erweiterung, die Fehler direkt auf der Seite markiert. Gut für die Redaktion, weil sich die Anzeige ohne Code-Kenntnisse lesen lässt.
• axe DevTools (Deque): Browser-Erweiterung für die Entwicklung, mit Verweis auf die betroffene Stelle im Code.
• Colour Contrast Analyser (TPGi): kleines Programm, das Kontraste mit einer Pipette misst, auch in Bildern und Entwürfen. Damit lässt sich schon vor der Umsetzung prüfen.
• Lighthouse: in Chrome eingebaut, liefert eine Punktzahl für Barrierefreiheit.
• NVDA und VoiceOver: Screenreader zum Gegenhören, NVDA kostenlos für Windows, VoiceOver eingebaut in Mac und iPhone.

Automatische Tests finden aber nur einen Teil der Fehler. Deque, der Hersteller von axe, hat 2021 Daten aus über 2.000 Audits ausgewertet und kam auf 57 Prozent der Fehler, gezählt nach ihrer Anzahl. Das ist eine Herstellerangabe, und selbst in dieser Rechnung bleibt fast die Hälfte übrig. Ob ein Alternativtext das Bild sinnvoll beschreibt, ob eine Fehlermeldung verständlich ist oder ob die Fokus-Reihenfolge Sinn ergibt, kann kein Werkzeug beurteilen.

Wir sehen das auf unserer eigenen Seite. Auf ecommaze.de läuft Lighthouse bei jeder Änderung automatisch mit, und unter 95 Punkten für Barrierefreiheit geht keine Änderung live. Trotzdem zeigte im Juli eine neue Prüfkategorie in Googles PageSpeed Insights einen Fehler, der bis dahin durchgerutscht war: Eine Reihe von Links trug eine falsche ARIA-Rolle, wodurch ihre Struktur für Hilfsmittel zerfiel. Der Fehler steckte in einem einzigen Attribut. Für Besucher mit Maus sah alles richtig aus.

Was nicht auf die Liste gehört

Zwei Dinge tauchen in Angeboten und Checklisten regelmäßig auf und gehören trotzdem nicht dazu.

Overlay-Plugins. Das sind Skripte, die eine Website nach dem Einbinden angeblich automatisch barrierefrei machen. Sie ändern die Darstellung, reparieren aber nicht den Code darunter. Ein Button ohne Namen bleibt ein Button ohne Namen, ein Formular ohne Beschriftung bleibt eines. Ein Bedienfeld, mit dem Besucher die Schrift vergrößern oder den Kontrast erhöhen, ist trotzdem sinnvoll. Auf ecommaze.de gibt es auch eines. Es ist ein Zusatz, keine Reparatur.

Punkte aus WCAG 2.2. Version 2.2 ist seit Oktober 2023 veröffentlicht und bringt neue Kriterien, etwa eine Mindestgröße für Klickflächen (2.5.8) oder die Regel, dass der Fokus nicht von anderen Elementen verdeckt sein darf (2.4.11). Das BFSG verweist über die EN 301 549 derzeit auf Version 2.1. Die neuen Punkte sind sinnvoll und bei einem Neubau schnell mitgenommen, verpflichtend sind sie heute aber nicht. Eine Checkliste, die sie als Pflicht verkauft, vermischt beides.

Die Liste verteilen statt abarbeiten

Der häufigste Fehler bei der Barrierefreiheit ist kein technischer. Es ist die Annahme, einer werde sich schon darum kümmern. Die Designpunkte gehören an die Agentur oder den Grafiker, die Redaktionspunkte an alle, die Inhalte pflegen, die Entwicklungspunkte an den, der die Website technisch betreut. Wer die Liste in drei Teile schneidet und jedem seinen Teil gibt, weiß nach zwei Wochen mehr als nach einem Audit, das in der Schublade liegt.

Bleiben danach Befunde übrig, die Sie nicht selbst beheben können, sehen wir uns Ihre Seite gern an. Neue Websites bauen wir so, dass die Punkte oben von Anfang an erfüllt sind. Mehr dazu unter Webdesign. Und zum Schluss: Zu einer barrierefreien Website gehört eine Erklärung zur Barrierefreiheit. Wie so etwas aussehen kann, zeigt unsere eigene Erklärung zur Barrierefreiheit.

Häufige Fragen zur Checkliste für barrierefreie Websites