Website barrierefrei machen: die praktische Checkliste für Level AA

Du willst deine Website barrierefrei machen, aber die WCAG-Richtlinien lesen sich wie ein Beipackzettel? Dann ist das hier für dich. Diese Checkliste, die ich für meine Kund:innen erstellt habe und verwende, übersetzt die wichtigsten Kriterien in klare, abhakbare Schritte – mit Fokus auf Level AA, das für die meisten Websites der maßgebliche Standard ist.

Noch neu bei dem Thema? Dann lies zuerst den Überblick: Was eine barrierefreie Website ausmacht und für wen sie Pflicht ist.

Kurz vorab: A, AA, AAA – welche Stufe brauchst du?

Die WCAG kennen drei Stufen. Level A ist das absolute Minimum – ohne das können Hilfsmittel wie Screenreader deine Seite kaum nutzen. Level AA ist die ideale, praxisübliche Unterstützung und das, was Behörden und viele Unternehmen erfüllen müssen. Level AAA ist Spezialunterstützung, die sich selten für eine ganze Website erreichen lässt.

Diese Checkliste deckt die wichtigen A- und AA-Kriterien ab und markiert AAA-Punkte als „Kirsche“.

Wichtig zu wissen: Eine höhere Stufe bedeutet nicht automatisch mehr Aufwand – vieles ist einfach eine Frage der Sorgfalt.

Inhalte & Sprache

• Beschrifte Buttons und Links eindeutig. „Hier klicken“ oder „Weiterlesen“ sagt ohne Kontext nichts. Wer sich eine Liste aller Links vorlesen lässt, muss am Text erkennen, wohin er führt. (A)
• Schreib in klarer, einfacher Sprache. Vermeide Fachjargon, Redewendungen und komplizierte Metaphern – das hilft allen, nicht nur Menschen mit kognitiven Einschränkungen. (Kirsche / AAA)
• Setze Text linksbündig (bei Sprachen, die von links nach rechts gelesen werden). Zentrierter oder Blocksatz ist deutlich schwerer zu lesen. (Kirsche / AAA)

Struktur & Code (gilt für die ganze Seite)

• Gib die Seitensprache an (lang-Attribut im html-Element). So spricht der Screenreader Inhalte korrekt aus. (A)
• Jede Seite bekommt einen eindeutigen Titel (title-Element). Er ist oft das Erste, was Hilfsmittel vorlesen. (A)
• Nutze Landmark-Elemente wie nav und main, um wichtige Bereiche zu kennzeichnen – das erlaubt schnellen Zugriff auf Navigation und Hauptinhalt. (A)
• Sorge für einen linearen, logischen Inhaltsfluss. Die Reihenfolge im Code sollte der sichtbaren Reihenfolge entsprechen. (A)
• Vermeide autofocus und ungewollte Fokus-Sprünge – das verwirrt Screenreader-Nutzer:innen und erschwert die Bedienung. (A)
• Gib genug Zeit. Werden Online-Formular in einer Sitzung gespeichert, dann gib Menschen genug Zeit, sie in Ruhe auszufüllen, ohne dass die Sitzung zu früh abläuft. (A)
• Deaktiviere die Zoom-Funktion nicht. Manche müssen die Seite vergrößern, um sie zu lesen – nimm ihnen das nicht. (AA)

Bilder

• Jedes img braucht ein alt-Attribut. Ohne Alt-Text liest der Screenreader schlimmstenfalls den Dateinamen vor – das hilft niemandem. (A)
• Rein dekorative Bilder bekommen ein leeres Alt-Attribut (alt=""). So werden sie von Hilfsmitteln übersprungen, statt zu stören. (A)
• Komplexe Bilder brauchen eine Textalternative. Beschreibe Diagramme, Grafiken oder Karten im Fließtext – inklusive Datenpunkte und Kernaussage. (A)
• Enthält ein Bild Text, gehört dieser in den Alt-Text. Ein Logo „FedEx“ sollte den Alt-Wert „FedEx“ haben. (A)

Überschriften

• Nutze Überschriften für Struktur, nicht für Optik. Sie gliedern den Inhalt in logische Blöcke. (AA)
• Nur eine h1 pro Seite – sie benennt den übergeordneten Zweck der Seite (nicht den Website-Namen). (AA)
• Halte die Reihenfolge ein und überspring keine Ebenen. Nach h2 kommt h3, nicht direkt h4. Für reine Optik nutze CSS. (AA)

Links, Buttons & Navigation

• Links sind als Links erkennbar – nicht nur durch Farbe. Eine Unterstreichung ist die klarste, allgemein verstandene Lösung. (A)
• Verwende echte Elemente: a (mit href) für Links, button für Aktionen. Hilfsmittel erkennen sie nur dann korrekt. (A)
• Bau einen Sprunglink ein („Zum Inhalt springen“), der beim Fokussieren sichtbar wird – so umgeht man wiederkehrende Navigation. (A)Kirsche
• Kündige Links an, die in neuem Tab öffnen. Am besten vermeiden – und wenn, dann klar erkennbar machen. (Empfehlung)

Tastatur-Bedienbarkeit

Viele Menschen können keine Maus nutzen. Deine Seite muss komplett per Tastatur bedienbar sein.

• Die Fokus-Reihenfolge folgt dem sichtbaren Layout. Man muss sich vorhersehbar durch die Seite bewegen können. (A)
• Kein Fokus auf unsichtbare Elemente (inaktive Dropdowns, Off-Screen-Navigation, geschlossene Modals). (A)
• Sichtbarer Fokus-Stil für alle interaktiven Elemente – man muss sehen, wo man gerade ist. (AA)

Formulare

• Jedes Eingabefeld hat ein verknüpftes label (per for/id). (A)
• Gruppiere zusammengehörige Felder mit fieldset und legend. (A)
• Zeig Fehler gesammelt über dem Formular – mit Link zum jeweiligen Feld. (A)
• Ordne Fehlermeldungen ihrem Feld zu (z. B. via aria-describedby). (A)
• Kommuniziere Fehler, Warnungen und Erfolg nicht nur über Farbe. Nutze zusätzlich Text oder Symbole. (A)
• Nutze autocomplete für Standardfelder (Name, Adresse, Telefon) – das erleichtert das Ausfüllen. (AA)

Farbkontrast (der häufigste AA-Stolperstein)

Kontrast ist der Punkt, an dem die meisten Seiten scheitern – und der sich am leichtesten prüfen lässt, z. B. mit dem WebAIM Contrast Checker.

• Normaler Text: Kontrastverhältnis mindestens 4,5:1. (AA)
• Großer Text: mindestens 3:1. (AA)
• Symbole und Rahmen von Eingabefeldern: mindestens 3:1. (AA)
• Text auf Bildern/Videos und deine Markierungsfarbe (::selection): auch hier auf Lesbarkeit prüfen. (AA)

Darstellung & Zoom

• Vergrößere den Text auf 200 % – bleibt alles lesbar, ohne dass sich Inhalte überlappen? (AA)
• Gib Hinweise nicht nur über Ort oder Sinne („rechts“, „nach dem Ton“), sondern nenne echte Namen von Bereichen. (AA)
• Halte das Layout einfach und einheitlich. (AA)
• Prüf spezielle Browser-Modi (hoher Kontrast, invertierte Farben, Graustufen): Bleibt alles erkennbar? (A)

Medien, Video & Audio

• Nichts spielt automatisch ab. Unerwartetes Audio/Video ist störend und kann Auslöser für Krampfanfälle sein. (A)
• Alles lässt sich pausieren – idealerweise auch per Leertaste. (A)
• Videos haben Untertitel, Audio hat ein Transkript. (A)
• Keine stroboskopischen/blitzenden Effekte (max. dreimaliges Aufblitzen pro Sekunde) oder weise zum Beispiel mithilfe des Able Players vorher darauf hin. (A)

Animation

• Animationen bleiben dezent und blinken nicht stark. (A)
• Hintergrundvideos lassen sich anhalten. (A)
• Respektiere prefers-reduced-motion: Wer „Bewegung reduzieren“ aktiviert hat, bekommt keine (oder langsamere) Animationen. (A)

Mobil & Touch

• Genug Abstand zwischen interaktiven Elementen – wichtig für Menschen mit motorischen Einschränkungen. (A)
• Beide Ausrichtungen erlauben (Hoch- und Querformat). (AA)
• Kein horizontales Scrollen. (AA)
• Touch-Ziele groß genug (Menü-Icons, Social-Buttons) für verschiedene Hand- und Stiftgrößen. (Kirsche / AAA)

Ehrlich bleiben: Was diese Checkliste kann – und was nicht

Eine wichtige Sache vorweg, weil sie oft untergeht: Diese Checkliste macht deine Seite besser, aber sie ist keine Garantie. Es gibt keine „zu 100 % barrierefreie“ Website – und du solltest misstrauisch werden, wenn jemand genau das verspricht. Barrierefreiheit deckt ein breites Spektrum an Bedürfnissen ab, und manches lässt sich nur mit echten Nutzer:innen und Fachleuten wirklich prüfen.

Der ehrliche Weg ist deshalb nicht „alles perfekt“, sondern „Schritt für Schritt zugänglicher“. Jeder Punkt, den du oben abhakst, macht deine Seite sofort für mehr Menschen nutzbar. Das ist schon eine Menge wert.

Lieber mit Begleitung?

Am günstigsten und saubersten wird Barrierefreiheit, wenn sie von Anfang an mitgedacht wird – bei einer neuen Seite oder einem Relaunch.

Wenn du das nicht allein stemmen willst: So gehe ich an Webdesign heran – Barrierefreiheit, Technik und SEO von Anfang an zusammengedacht. Schreib mir gerne, dann schauen wir gemeinsam auf deine Seite.