Barrierefreie Website Checkliste: die 8 Punkte, die wirklich zählen

Eine barrierefreie Website Checkliste ist dann nützlich, wenn sie Teams zu konkreten Korrekturen führt: sichtbare Fokuszustände, klare Überschriften, lesbare Kontraste, saubere Formulare und Medien, die nicht ohne Alternativen ausgeliefert werden. W3C ordnet WCAG in die vier Prinzipien wahrnehmbar, bedienbar, verständlich und robust ein, und Google erinnert in seinen people-first-Richtlinien daran, dass gute Inhalte für Menschen geschrieben werden müssen – nicht für Suchmaschinen-Tricks.

Für DACH-Teams ist die beste Checkliste deshalb kein juristisches Dokument, sondern ein praktisches Arbeitswerkzeug. Sie hilft Design, Content, Entwicklung und QA, dieselben Fragen in derselben Reihenfolge zu stellen, bevor ein Relaunch live geht oder eine Landingpage in den Verkaufsprozess eintritt.

Die vier Prinzipien hinter jeder guten Prüfung

WCAG 2.2 besteht aus 13 Richtlinien, die sich auf vier Prinzipien stützen. Das ist hilfreich, weil man Barrierefreiheit so nicht als Sammlung von Einzelaufgaben versteht, sondern als System. Wer nur Alt-Texte prüft, übersieht Formulare; wer nur Formulare prüft, übersieht Fokus, Kontrast und Struktur.

Die vier Prinzipien bilden ein System aus Wahrnehmung, Bedienung, Verständlichkeit und Robustheit.

Deshalb lohnt es sich, jede große Seite in denselben vier Fragen zu lesen: Kann man sie wahrnehmen? Kann man sie bedienen? Versteht man sie beim ersten Durchgang? Und bleibt sie auch dann stabil, wenn Browser, Geräte oder Assistive Technologien anders arbeiten als erwartet?

1. Wahrnehmbarkeit

Wahrnehmbare Inhalte sind die Basis. Bilder brauchen sinnvolle Alt-Texte, wenn sie Information tragen; dekorative Grafiken dürfen leer bleiben. Text darf nicht nur über Farbe funktionieren. Wenn eine Fehlermeldung rot ist, muss sie auch ohne Rot erkennbar sein. Und bei Videos oder Audio braucht es Untertitel oder Transkripte, damit Inhalt nicht an ein einziges Sinnesorgan gebunden bleibt.

Auf der visuellen Ebene geht es auch um Hierarchie: Überschriften, Abstände und Gruppen müssen den Inhalt lesbar machen. Je weniger sich ein Leser orientieren muss, desto eher bleibt er auf der Seite und versteht, was das Unternehmen anbietet.

2. Bedienbarkeit

Eine Website ist nur dann bedienbar, wenn sie komplett mit der Tastatur funktioniert. Das bedeutet: Menüs, Buttons, Formulare und Dialoge müssen erreichbar sein, der Fokus muss sichtbar bleiben, und keine Komponente darf den Fokus verstecken. W3C betont in WCAG 2.2 unter anderem Fokusregeln wie Focus Not Obscured und Focus Appearance.

Für Teams ist das ein guter Schnelltest: Mit Tab, Shift+Tab und Enter durch die wichtigsten Seiten. Wenn Sie im Header hängen bleiben, in einem Popup gefangen sind oder den aktiven Zustand kaum sehen, ist die Interaktion noch nicht reif.

3. Verständlichkeit

Verständlich ist eine Seite, wenn sie ihre Struktur offenlegt. Eine klare H1, logisch aufeinanderfolgende Zwischenüberschriften, präzise Linktexte und eine erkennbare Seitensprache helfen Menschen und Suchmaschinen. Google bewertet hilfreichen Content nicht nach Keyword-Überladung, sondern danach, ob die Seite Menschen tatsächlich weiterbringt.

Das heißt nicht, dass SEO egal wäre. Es heißt, dass Semantik besser funktioniert als Scheinstruktur. Wenn ein Abschnitt ein FAQ ist, sollte er wie ein FAQ wirken. Wenn ein Link zu einem Kontaktformular führt, sollte er das auch sagen. So entsteht Vertrauen ohne extra Erklärschicht.

4. Formulare und Fehlermeldungen

Formulare sind oft der Punkt, an dem gute Seiten scheitern. W3C empfiehlt in seinem Forms Tutorial unter anderem sichtbare Labels, sinnvolle Gruppierung, klare Anweisungen, verständliche Validierung und eindeutige Rückmeldungen. Wer nur Platzhaltertexte nutzt, macht es unnötig schwer.

Praktisch heißt das: Jedes Feld braucht ein echtes Label, Fehlermeldungen müssen sagen, was falsch ist und wie man es behebt, und lange Formulare sollten in logisch verständliche Schritte zerlegt werden. Wenn Sicherheit Zeitlimits erzwingt, sollte der Nutzer sie verlängern oder abschalten können, statt abrupt aus dem Prozess zu fallen.

Klare Labels, sichtbarer Fokus und eindeutige Rückmeldungen machen Formulare leichter nutzbar.

5. Medien und Bewegung

Bei Medien gilt dasselbe Prinzip wie bei Text: Information muss zugänglich bleiben. Videos brauchen Untertitel, Audio braucht Transkripte, und autoplay ist fast immer ein Fehler, weil er Kontrolle wegnimmt. Bewegte Effekte sollten sparsam eingesetzt werden; nichts darf flackern oder ständig Aufmerksamkeit erzwingen.

Auch Animationen gehören zur Nutzererfahrung. Wenn eine Bewegung nur dekorativ ist, sollte sie nie den Inhalt blockieren. Wenn sie einen Zustand erklärt, muss es eine reduzierte Alternative geben. Das macht die Seite ruhiger, nicht langweiliger.

6. Kontrast, Zoom und Zielgrößen

Kontrast ist kein Design-Geschmacksdetail. W3C nennt für normalen Text mindestens 4,5:1 und für großen Text 3:1. Das hilft nicht nur Menschen mit Sehbeeinträchtigung, sondern allen, die bei Sonne, auf kleinen Displays oder in schwierigen Lichtverhältnissen lesen.

Gleichzeitig muss eine Seite skalieren. Inhalte sollten bei 200 Prozent Zoom nicht auseinanderbrechen, und Schaltflächen brauchen genug Größe, damit sie nicht nur auf dem Desktop funktionieren. Wenn ein visuelles Konzept nur im perfekten Screenshot gut aussieht, ist es noch kein robustes System.

Kontrast, Zoom und Fokus sollten schon vor dem Launch gemeinsam getestet werden.

7. Inhalt, Struktur und SEO

Barrierefreiheit verbessert nicht automatisch Rankings, aber sie verbessert die Dinge, die Rankings und Conversions unterstützen: klare Struktur, bessere Lesbarkeit, sauberere Semantik und weniger Reibung in Forms und Navigation. Das ist besonders wichtig auf Service-Seiten, Landingpages und in CMS-basierten Redaktionsprozessen.

Eine gute SEO- und Accessibility-Arbeit beginnt also mit derselben Frage: Kann jemand die Seite ohne Rätsel bedienen? Wenn die Antwort ja ist, profitieren oft beide Seiten – Nutzer und Suche. Wenn die Antwort nein ist, helfen auch perfekte Meta Titles nur begrenzt.

8. Testen, priorisieren und nachhalten

Eine echte Checkliste endet nicht beim Design. Sie braucht einen Testplan: automatische Checks für Kontrast, strukturierte manuelle Prüfungen mit Tastatur und Screenreader, und echte Inhaltsreviews für Überschriften, Linktexte und Fehlertexte. Automatisierung findet schnell viele Probleme, aber nie alle.

Am besten starten Teams mit den Seiten, die am meisten Risiko haben: Startseite, Service-Seiten, Formulare, Checkout, Login und Kontakt. Wer dort sauber ist, hat oft den größten Hebel. Der Rest kann danach systematisch folgen, statt im Chaos zu enden.

Der nächste sinnvolle Schritt ist meist ein kurzer Review der wichtigsten Conversion-Seiten: Inhalte prüfen, Fokus testen, Formulare anfassen und die Redaktionslogik sauberziehen. So wird aus einer Checkliste ein Prozess, der im Alltag wirklich hilft.

Quellen und weiterführende Links

W3C WCAG overview: https://www.w3.org/WAI/standards-guidelines/wcag/ · Google helpful content: https://developers.google.com/search/docs/fundamentals/creating-helpful-content · W3C forms tutorial: https://www.w3.org/WAI/tutorials/forms/ · Contrast minimum: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html