Barrierefreiheit WCAG: warum es sich lohnt

WCAG hat drei Stufen: A (Minimum), AA (Standard), AAA (höchste)
Seit dem 28. Juni 2025 ist Barrierefreiheit durch das BFSG Pflicht
Vier Säulen: Kontrast, Alt-Texte, Tastaturbedienung, sichtbarer Fokus
Eine barrierefreie Seite rankt besser und hat weniger Absprünge
Die meisten Fixes in WordPress gelingen ohne Neuaufbau der Seite
[/dwb_keytakeaways]

Was WCAG ist und wozu du es brauchst

WCAG (Web Content Accessibility Guidelines) ist ein internationales Regelwerk, das beschreibt, wie eine Seite gebaut sein muss, damit jeder sie nutzen kann. Jeder, das heißt auch die sehbehinderte Person mit Sprachausgabe, der Mensch mit zitternden Händen, der nur die Tastatur bedient, jemand mit Farbenblindheit oder schlicht der Kunde in der prallen Sonne an der Haltestelle, der grauen Text auf weißem Grund nicht erkennt.

Das klingt nach einem Thema für eine kleine Gruppe, ist aber eine Täuschung. Von Barrieren auf einer Seite sind weit mehr Menschen betroffen, als du denkst, denn Einschränkungen sind oft vorübergehend oder situativ. Ein gebrochener Arm, eine laute Umgebung, ein schwaches Handy, müde Augen am Abend. Barrierefreiheit ist keine Funktion für eine Minderheit, sondern eine Qualität, die dein gesamtes Publikum spürt.

Für dich als Seitenbetreiber hat WCAG drei konkrete Gesichter: eine Rechtspflicht, ein SEO-Faktor und ein echter Hebel für die Conversion. In diesem Text zeige ich alle drei und danach konkret, wie du das in WordPress ohne kompletten Neuaufbau umsetzt.

Die Stufen A, AA und AAA: welche gilt für dich

WCAG teilt die Anforderungen in drei Konformitätsstufen. Das sind keine getrennten Standards, sondern Treppenstufen: AA enthält das gesamte A, und AAA das gesamte AA.

• Stufe A: das absolute Minimum. Ohne sie kann ein Teil der Menschen die Seite gar nicht nutzen. Hierher gehört zum Beispiel die Pflicht zu Alt-Texten für Bilder und die Bedienung der Grundfunktionen per Tastatur.
• Stufe AA: der marktübliche Standard und die Stufe, auf die das Gesetz verweist. Hinzu kommen ein Textkontrast von 4,5:1, verständliche Fehlermeldungen in Formularen und eine konsistente Navigation. Das ist dein Ziel.
• Stufe AAA: die höchste, sehr anspruchsvolle Stufe. In der Praxis lässt sie sich auf einer ganzen Seite selten erfüllen, daher gilt sie als Anspruch für einzelne Elemente, nicht als Pflicht für die gesamte Seite.

Wenn jemand von einer barrierefreien Seite spricht, meint er in der Praxis WCAG auf Stufe AA. Das ist ein vernünftiger Kompromiss zwischen echtem Zugang für die Nutzer und einem machbaren Aufwand bei der Umsetzung. Ziele auf AA und bleib dabei.

Wer von einer barrierefreien Seite profitiert

Am einfachsten denkst du über Barrierefreiheit nach, indem du dir konkrete Menschen vorstellst, denen du das Leben erleichterst. Die Liste ist länger, als man meint.

• Blinde und sehbehinderte Menschen: nutzen Screenreader, die den Code der Seite vorlesen. Ohne Alt-Texte und saubere Struktur hören sie Kauderwelsch statt Inhalt.
• Menschen mit motorischen Einschränkungen: navigieren nur per Tastatur oder mit spezieller Hardware. Was sich nicht per Tabulator erreichen lässt, existiert für sie schlicht nicht.
• Menschen mit Farbenblindheit: erkennen eine nur über Farbe gegebene Information nicht, etwa ein rotes Fehlerfeld ohne Text.
• Ältere Menschen: eine wachsende und kaufkräftige Gruppe, der größerer Text, deutlicher Kontrast und eine einfache Navigation entgegenkommen.
• Jeder unter schwierigen Bedingungen: Sonne auf dem Bildschirm, Lärm statt Ton im Video, nur eine freie Hand. Barrierefreiheit hilft auch voll fitten Menschen im ungünstigen Moment.

Die vier Säulen mit dem größten Effekt

Das vollständige WCAG umfasst Dutzende Kriterien, doch im Alltag sorgen vier Dinge für den Großteil der echten Barrierefreiheit. Damit fängst du an.

1. Textkontrast: normaler Text braucht einen Kontrast von mindestens 4,5:1 zum Hintergrund, großer Text 3:1. Hellgrauer Text auf weißem Grund ist der Klassiker unter den Fehlern, der im Entwurf elegant wirkt und in der Praxis unlesbar ist.
2. Alt-Texte: jedes Bild, das Inhalt transportiert, braucht eine kurze Beschreibung, die der Screenreader vorliest. Rein dekorative Bilder bekommen einen leeren Alt-Text, damit der Screenreader sie überspringt.
3. Tastaturbedienung: die ganze Seite lässt sich ohne Maus bedienen. Menü, Aufklappmenüs, Schieberegler, Warenkorb, Formulare. Alles per Tabulator in logischer Reihenfolge erreichbar.
4. Sichtbarer Fokus: beim Navigieren per Tabulator muss das aktuelle Element deutlich umrandet sein. Diese Umrandung im CSS zu entfernen, weil sie unschön wirkt, ist eine der häufigsten Sünden und kappt die Tastaturbedienung.

Dazu kommt ARIA, ein Satz von Attributen, die dem Screenreader Rolle und Zustand eines Elements mitteilen, etwa dass der Hamburger-Button ein Menü öffnet und ob es gerade offen ist. ARIA ist ein nützliches Werkzeug, aber mit einem Grundsatz: ein korrektes HTML-Element ist besser als ein notdürftig zusammengebautes Element mit aufgeklebter Rolle. Die erste Regel von ARIA lautet wörtlich, ARIA nicht zu verwenden, wenn ein natives Element möglich ist.

SEO-Vorteil und Conversion: hier wird es spannend

Das ist der Teil, den Ratgeber am häufigsten auslassen und der für dich wirtschaftlich am wichtigsten ist. Barrierefreiheit und SEO sind zu großen Teilen dieselbe Arbeit. Google ist wie ein anspruchsvoller, blinder Nutzer: es sieht keine schöne Grafik, es liest Code, Struktur und Text.

• Alt-Texte helfen Screenreadern und gleichzeitig der Google-Bildersuche zu verstehen, was auf dem Foto zu sehen ist.
• Eine saubere Überschriftenstruktur aus H1, H2 und H3 führt den Screenreader durch den Inhalt und hilft genauso den Google-Robots, die Hierarchie der Seite zu erfassen.
• Verständliche Links mit sinnvollem Text statt eines leeren hier klicken sind für alle nachvollziehbar und tragen Wert für SEO.
• Semantischer, schlanker Code lädt schneller und stabiler, was die Core Web Vitals verbessert, und die sind ein Rankingfaktor.

Auf der Conversion-Seite ist der Effekt ebenso konkret. Besserer Kontrast und größerer Text bedeuten weniger Ermüdung und mehr Menschen, die bis zur Kasse kommen. Verständliche Fehler im Formular (woran genau es hakt, nicht nur ein rotes Feld) bedeuten weniger abgebrochene Bestellungen. Vollständige Tastaturbedienung bedeutet Kunden, die überhaupt kaufen können. Barrierefreiheit ist kein Kostenfaktor für eine Handvoll Menschen, sondern eine Verbesserung für alle, die sich in Zahlen zeigt.

Der rechtliche Aspekt: was sich seit Juni 2025 geändert hat

Hier beginnt das Thema, das sich nicht länger aufschieben lässt. Grundlage ist der European Accessibility Act (EAA), eine EU-Richtlinie, die Deutschland mit dem Barrierefreiheitsstärkungsgesetz (BFSG) umgesetzt hat. Die Pflichten gelten seit dem 28. Juni 2025.

In der Praxis heißt das: Onlineshops, die sich an Verbraucher richten (B2C), müssen barrierefrei sein. Das Gesetz verweist auf die europäische Norm EN 301 549, die wiederum auf die AA-Stufe der WCAG zurückgreift. Ausgenommen sind nur Kleinstunternehmen, die Dienstleistungen erbringen, also Betriebe mit weniger als zehn Beschäftigten und höchstens zwei Millionen Euro Jahresumsatz. Verlass dich aber nicht blind auf diese Ausnahme, denn Kleinstunternehmen, die Produkte herstellen, sind sehr wohl in der Pflicht.

Für den polnischen Markt sieht es ähnlich aus, nur mit niedrigeren Bußgeldern. Dort setzt dasselbe EU-Gesetz das Gesetz vom 26. April 2024 um, das ebenfalls seit dem 28. Juni 2025 gilt und für bestehende Dienste eine Übergangsfrist bis zum 28. Juni 2030 vorsieht. Wenn du auf beiden Märkten verkaufst, deckt ein sauber umgesetzter Standard AA beide Rechtsräume auf einmal ab.

Audit und Werkzeuge: den Zustand der Seite messen

Bevor du etwas verbesserst, miss den Ausgangspunkt. Einen Teil entdecken kostenlose automatische Werkzeuge, doch ich sage es gleich: ein Automat erfasst höchstens die Hälfte der Probleme. Den Rest, etwa ob Alt-Texte sinnvoll sind oder die Tab-Reihenfolge logisch ist, bewertet keine Maschine.

• WAVE (wave.webaim.org): Erweiterung und Webseite, die Kontrastfehler und fehlende Alt-Texte direkt in der Vorschau der Seite zeigt. Ideal für den Einstieg.
• axe DevTools: Browser-Erweiterung, ein genaues technisches Audit für alle, die tiefer in den Code wollen.
• Lighthouse: in Chrome eingebaut, der Reiter Accessibility liefert schnell eine Punktzahl und eine Problemliste.
• Manueller Tastaturtest: leg die Maus weg und geh den ganzen Kaufweg durch. Das ersetzt kein Automat.
• Screenreader: NVDA ist unter Windows kostenlos. Schalte ihn ein und hör, wie die Seite wirklich klingt. Das öffnet die Augen.

Häufige Fehler, die ich am öftesten sehe

In Jahren der Arbeit mit WordPress und WooCommerce kehren dieselben Probleme wie ein Bumerang zurück. Wenn du nur diese Liste prüfst, behebst du die meisten typischen Barrieren.

• Zu niedriger Textkontrast: modisches Hellgrau auf Weiß. Sieht modern aus, liest sich miserabel.
• Fehlende Alt-Texte oder ein Alt-Text mit Dateiname wie IMG_2381 statt einer echten Beschreibung.
• Entfernter Fokus im CSS per outline: none ohne jede Alternative, was die Tastaturbedienung praktisch abschaltet.
• Information nur über Farbe: rotes Fehlerfeld ohne Text, grüner Statuspunkt ohne Beschriftung.
• Accessibility-Overlays: ein aufgeklebtes Widget mit Reglern, das Konformität vortäuscht, oft Screenreader behindert und nichts wirklich repariert.
• Karussells und Pop-ups ohne Stopp-Möglichkeit und ohne Tastaturbedienung, in denen sich der Nutzer verfängt.

So setzt du WCAG in WordPress um

Die gute Nachricht zum Schluss: in WordPress gelingen die meisten Fixes ohne Neuaufbau der Seite. Hier ist die Reihenfolge, die ich bei Kunden anwende.

Diese Schritte bringen die meisten WordPress-Seiten auf WCAG AA, ohne das ganze Theme auszutauschen. Schwierig wird es bei Seiten auf schweren Baukästen, die wirren Code erzeugen, oder bei alten Themes ohne Semantik. Dann braucht es ein Audit und gezielte Eingriffe im Code, manchmal ein schlankes, für das Projekt geschriebenes Theme.

Wenn du das einmal richtig erledigt haben willst, mache ich bei DawidWeb Barrierefreiheits-Audits und WCAG-AA-Umsetzungen für Seiten und Shops: bessere Kontraste, Alt-Texte, Tastaturbedienung und Fokus, eine geordnete Struktur sowie die Erstellung der Erklärung zur Barrierefreiheit. Webseiten und Shops baue ich ab 600 Euro, ich habe über 120 Projekte hinter mir, und ein Angebot für deine konkrete Umsetzung bekommst du in 24 Stunden.