WCAG-Checkliste für deine Website

Hier kommt unsere kurze Checkliste auf Basis der Web Content Accessibility Guidelines (WCAG Version 2.1 Level AA) für deine Website. Wir haben die aus unserer Sicht wichtigsten Punkte für dich einmal zusammengefasst; ohne Anspruch auf Vollständigkeit. Die Checkliste soll dir als erste Orientierung helfen. Für eine vollständige Beschreibung der Kriterien schaue dir die umfassende WCAG-Dokumentation an oder die WCAG-Checkliste von WebAIM.

Bist du bereit? Dann legen wir mit der WCAG-Checkliste für deine Website los.

WCAG-Checkliste für deine Website: Schritt für Schritt

Barrierefreiheit klingt nach Aufwand, nach Paragraphen und nach einem Thema, das man gern nach hinten schiebt. Dabei ist eine barrierefreie Website vor allem eines: eine Website, die für alle funktioniert. Für Menschen mit Sehbehinderung, für Nutzerinnen und Nutzer mit motorischen Einschränkungen, für ältere Menschen, für alle, die gerade in der prallen Sonne auf ihr Handy schauen oder ohne Ton in der Bahn sitzen.

Diese WCAG-Checkliste für deine Website führt dich Schritt für Schritt durch die wichtigsten Anforderungen. Ohne Fachchinesisch, dafür mit konkreten Punkten, die du direkt abhaken kannst.

Was die WCAG eigentlich sind

Die Web Content Accessibility Guidelines, kurz WCAG, sind der internationale Standard für barrierefreie Webinhalte. Herausgeber ist das World Wide Web Consortium, also die Organisation, die auch HTML und CSS standardisiert. Die aktuelle Version ist WCAG 2.2, veröffentlicht im Oktober 2023.

Die Richtlinien kennen drei Konformitätsstufen:

• Level A: die absolute Basis. Ohne diese Punkte ist deine Website für viele Menschen schlicht unbenutzbar.
• Level AA: der praktische Standard. Das ist das Level, auf das sich Gesetze und Ausschreibungen beziehen. Hier solltest du landen.
• Level AAA: die Kür. Sinnvoll für einzelne Kriterien, als Gesamtziel für die meisten Websites aber unrealistisch.

Kurz gesagt: Level AA ist dein Ziel.

Warum das Thema gerade jetzt drängt

Seit dem 28. Juni 2025 gilt in Deutschland das Barrierefreiheitsstärkungsgesetz, kurz BFSG. Es setzt den European Accessibility Act um und verpflichtet viele private Anbieter zur digitalen Barrierefreiheit. Betroffen sind unter anderem Onlineshops, Buchungssysteme, Banken, Telekommunikation und E-Books.

Ausgenommen sind Kleinstunternehmen mit weniger als zehn Beschäftigten und weniger als zwei Millionen Euro Jahresumsatz, sofern sie Dienstleistungen anbieten. Wichtig ist aber: Diese Ausnahme greift nicht automatisch für alle, und sie ist kein Freifahrtschein. Kläre deinen konkreten Fall im Zweifel juristisch ab.

Öffentliche Stellen sind ohnehin schon länger über die Barrierefreie-Informationstechnik-Verordnung gebunden.

Und selbst wenn du rechtlich nicht verpflichtet bist: Barrierefreiheit verbessert die Bedienbarkeit, hilft der Suchmaschinenoptimierung und erweitert deine Zielgruppe um mehrere Millionen Menschen. Das ist selten eine schlechte Investition.

Die vier Prinzipien der WCAG

Alle Kriterien lassen sich auf vier Grundgedanken zurückführen. Im Englischen als POUR bekannt:

1. Wahrnehmbar: Inhalte müssen so aufbereitet sein, dass sie über verschiedene Sinne erfassbar sind.
2. Bedienbar: Alle Funktionen müssen sich auch ohne Maus nutzen lassen.
3. Verständlich: Sprache und Bedienung müssen nachvollziehbar sein.
4. Robust: Der Code muss so sauber sein, dass Hilfstechnologien ihn interpretieren können.

Die folgende WCAG-Checkliste ist genau danach sortiert.

Die WCAG-Checkliste für deine Website

1. Prinzip Wahrnehmbar

• Alternativtexte für Bilder Jedes inhaltstragende Bild braucht ein aussagekräftiges alt-Attribut. Beschreibe die Funktion, nicht das Offensichtliche. Ein Logo im Header, das zur Startseite führt, heißt "Zur Startseite" und nicht "Logo". Rein dekorative Grafiken bekommen ein leeres alt-Attribut, damit Screenreader sie überspringen.
• Farbkontraste prüfen Normaler Text braucht ein Kontrastverhältnis von mindestens 4,5 zu 1. Für großen Text ab 24 Pixel oder 19 Pixel in Fettschrift reichen 3 zu 1. Für Bedienelemente und Grafiken, die Information transportieren, gilt ebenfalls 3 zu 1. Das trifft in der Praxis erstaunlich viele hellgraue Fließtexte und pastellfarbene Buttons.
• Farbe ist nie das einzige Signal Ein Pflichtfeld darf nicht nur rot umrandet sein. Ein Link im Fließtext darf sich nicht allein durch die Farbe vom Text abheben. Ergänze Symbole, Unterstreichungen oder Text.
• Untertitel und Transkripte Videos mit Ton brauchen Untertitel. Reine Audioinhalte wie Podcasts brauchen ein Transkript. Automatische Untertitel sind ein Anfang, aber kein Ersatz für eine redaktionelle Korrektur.
• Struktur über echte Semantik Überschriften sind Überschriften, keine fett formatierten Absätze. Die Hierarchie von H1 bis H6 muss logisch sein, ohne Sprünge. Listen sind echte Listen, Tabellen haben Kopfzellen. Das hilft nicht nur Screenreadern, sondern auch Google.
• Zoom und Textvergrößerung Die Seite muss sich auf 200 Prozent vergrößern lassen, ohne dass Inhalte verschwinden oder überlappen. Bei 400 Prozent Zoom darf kein horizontales Scrollen nötig werden. Verbiete das Zoomen niemals über die Meta-Viewport-Angabe.
• Textabstände dürfen angepasst werden Wenn Nutzerinnen und Nutzer Zeilenhöhe, Wort- oder Buchstabenabstand über eigene Stile erhöhen, darf nichts abgeschnitten werden. Feste Höhen bei Buttons und Boxen sind hier der häufigste Stolperstein.

2. Prinzip Bedienbar

• Alles per Tastatur erreichbar Setz die Maus beiseite und navigiere deine Website nur mit Tabulator, Enter, Leertaste und Pfeiltasten. Kommst du überall hin? Kannst du jedes Menü öffnen, jedes Formular ausfüllen, jedes Modal wieder schließen? Wenn nicht, hast du deinen ersten Arbeitsauftrag.
• Sichtbarer Fokus Das aktuell fokussierte Element muss klar erkennbar sein. Der Fokusindikator darf nicht wegformatiert werden, und er darf nicht von anderen Elementen wie klebrigen Kopfzeilen oder Cookie-Bannern verdeckt sein. Ein Umriss mit ausreichendem Kontrast ist Pflicht, kein Designdetail.
• Keine Tastaturfallen Wer mit Tab in ein Element hineinkommt, muss auch wieder heraus. Video-Player, eingebettete Karten und Overlays sind hier typische Problemzonen.
• Skiplink anbieten Ein Sprunglink ganz oben, der direkt zum Hauptinhalt führt, spart Tastaturnutzenden bei jeder Seite das Durchtabben durch die komplette Navigation. Er darf versteckt sein, muss aber beim Fokussieren sichtbar werden.
• Ausreichend große Klickflächen Interaktive Elemente sollten mindestens 24 mal 24 Pixel groß sein, besser 44 mal 44. Kleine Icon-Buttons dicht nebeneinander sind auf dem Smartphone eine Zumutung.
• Genug Zeit lassen Automatische Weiterleitungen, ablaufende Sitzungen und Karussells, die von allein weiterspringen, müssen pausierbar oder verlängerbar sein. Alles, was sich länger als fünf Sekunden automatisch bewegt, braucht eine Stopptaste.
• Keine Blitze Nichts auf deiner Seite darf öfter als dreimal pro Sekunde blinken. Das kann epileptische Anfälle auslösen.
• Sprechende Linktexte "Hier klicken" und "Mehr erfahren" sagen ohne Kontext nichts aus. Screenreader lassen sich alle Links einer Seite als Liste ausgeben, und diese Liste sollte für sich verständlich sein. Schreib lieber "Zur WCAG-Checkliste als PDF".
• Konsistente Hilfe und weniger Tipparbeit Neu in WCAG 2.2: Hilfsangebote wie Kontaktlinks sollten auf allen Seiten an derselben Stelle stehen. Und Informationen, die Nutzende schon einmal eingegeben haben, sollten im selben Prozess nicht erneut abgefragt werden.

3. Prinzip Verständlich

• Sprache auszeichnen Im html-Tag gehört das lang-Attribut, also lang="de". Fremdsprachige Passagen im Text bekommen ihre eigene Auszeichnung. Sonst liest der Screenreader englische Zitate mit deutscher Aussprache vor, und das versteht niemand.
• Formulare beschriften Jedes Eingabefeld braucht ein verknüpftes Label. Ein Platzhaltertext ist kein Label, denn er verschwindet beim Tippen. Ergänze Hinweise zum erwarteten Format direkt beim Feld, nicht erst in der Fehlermeldung.
• Fehler klar benennen Sag konkret, was falsch ist und wie es richtig geht. "Ungültige Eingabe" hilft niemandem. "Bitte gib eine E-Mail-Adresse mit @ ein" schon.
• Vorhersehbare Bedienung Ein Fokuswechsel darf nicht automatisch die Seite wechseln. Ein Auswahlfeld darf nicht ungefragt ein Formular abschicken. Navigation und Bedienelemente stehen auf allen Seiten an derselben Stelle.
• Verständliche Sprache Kurze Sätze, aktive Formulierungen, erklärte Fachbegriffe. Leichte Sprache ist kein WCAG-Kriterium auf Level AA, aber ein Zusatzangebot, das viele Menschen erreicht.

4. Prinzip Robust

• Valides HTML Doppelte IDs, nicht geschlossene Tags und falsch verschachtelte Elemente bringen Screenreader durcheinander. Ein Validator findet das in Sekunden.
• Native Elemente vor ARIA Ein echter Button ist besser als ein div mit role="button". Nutze HTML-Elemente für das, wofür sie gemacht sind, und greife erst dann zu ARIA, wenn es wirklich nötig ist. Falsch gesetzte ARIA-Attribute richten mehr Schaden an als gar keine.
• Statusmeldungen ankündigen Wenn nach dem Absenden eines Formulars eine Erfolgsmeldung erscheint oder ein Filter die Trefferzahl ändert, muss das auch ohne Blickkontakt ankommen. Live-Regionen sorgen dafür, dass Screenreader solche Änderungen vorlesen.
• Sinnvolle Namen für Bedienelemente Der sichtbare Text eines Buttons muss Teil seines zugänglichen Namens sein. Sonst funktioniert Sprachsteuerung nicht: Wer "Klicke Senden" sagt, aber der Button heißt intern "Formular abschicken", schaut in die Röhre.

Die schnell gemachten Optmierungen zuerst

Wenn du heute nur eine Stunde Zeit hast, hol dir diese fünf Punkte:

• Alternativtexte für alle inhaltstragenden Bilder ergänzen
• Kontraste mit einem Prüfwerkzeug messen und zu helle Farben nachschärfen
• Fokusindikator sichtbar machen, falls er wegformatiert wurde
• Überschriftenhierarchie geradeziehen
• Alle Formularfelder mit echten Labels versehen

Damit deckst du erfahrungsgemäß einen großen Teil der typischen Fehler ab.

Womit du testen kannst

Automatische Werkzeuge finden nur einen Teil der Probleme, ungefähr ein Drittel. Sie sind trotzdem der beste Startpunkt.

• axe DevTools oder WAVE: Browser-Erweiterungen für die schnelle Prüfung einzelner Seiten
• Lighthouse: schon in Chrome eingebaut, liefert einen groben Accessibility-Score
• Contrast Checker: für die gezielte Farbprüfung
• Screenreader: NVDA unter Windows ist kostenlos, VoiceOver ist auf Mac und iPhone bereits installiert

Der wichtigste Test kostet dagegen gar nichts: Navigiere deine Seite einmal komplett mit der Tastatur. Und wenn du es ernst meinst, hol echte Nutzerinnen und Nutzer mit Behinderung dazu. Kein Werkzeug ersetzt diese Perspektive.

Die häufigsten Fehler in der Praxis

• Hellgrauer Text auf weißem Grund, weil er "eleganter" wirkt
• Cookie-Banner, die sich per Tastatur nicht schließen lassen
• Karussells ohne Pausetaste
• Icon-Buttons ohne beschriftenden Text
• PDF-Downloads, die selbst nicht barrierefrei sind
• Overlay-Werkzeuge, die Barrierefreiheit per Skript "reparieren" sollen. Sie lösen die Probleme nicht, verdecken sie oft nur und werden von Betroffenen überwiegend abgelehnt.

Vier häufige Fragen kurz beantwortet

Welches Level brauche ich?

Level AA nach WCAG 2.2. Das ist der Maßstab, auf den sich die europäische Norm EN 301 549 und damit auch die deutsche Gesetzgebung stützt.

Reicht ein Accessibility-Plugin?

Nein. Plugins und Overlays können einzelne Aspekte unterstützen, aber sie ersetzen keine saubere Umsetzung im Quelltext.

Muss ich meine Website komplett neu bauen?

Meistens nicht. Viele Kriterien lassen sich im bestehenden Theme umsetzen. Erst wenn die Grundstruktur unrettbar ist, lohnt der Neubau.

Wie oft muss ich prüfen?

Bei jeder größeren Änderung und mindestens einmal im Jahr. Barrierefreiheit ist kein Projekt mit Enddatum, sondern eine Haltung im Arbeitsalltag.

Barrierefreiheit als Qualitätsmaßstab für eine Website

Eine WCAG-Checkliste für deine Website ist kein bürokratisches Übel, sondern eine Qualitätsprüfung. Fast alles, was Barrierefreiheit verbessert, macht die Seite auch für alle anderen besser: klarere Struktur, bessere Lesbarkeit, verlässliche Bedienung, sauberer Code.

Fang klein an. Nimm dir diese Woche die Kontraste vor, nächste Woche die Alternativtexte. Jeder Punkt, den du abhakst, macht deine Website für ein paar Menschen mehr nutzbar. Und das ist am Ende der ganze Punkt.

Kostenfreie Beratung zur Barrierefreiheit und den WCAG

WCAG-Checkliste für deine Website: Du hast Fragen oder willst ein Projekt starten? Dann nutze gerne unsere kostenfreie Beratung.

Hier geht es zu unserem Anfrageformular