BFSG 2025 in WordPress umsetzen: 12 Punkte, die ich immer prüfe

Wer den ersten Beitrag gelesen hat, weiß jetzt: Gilt das für mich — ja / nein — und warum überhaupt?

Barrierefreiheit: Betrifft das neue BFSG meine Website?

Hier gehen wir eine Stufe tiefer: Wenn Ihre Website betroffen ist oder Sie sie einfach zukunftssicher machen wollen, dann schauen wir uns genau diese Punkte in WordPress an. Ich zeige es anhand von GeneratePress (GP) und GenerateBlocks (GB), weil wir damit all unsere Kundenprojekte umsetzen.

Ziel: barrierearm, gut bedienbar, möglichst nah an BFSG/WCAG – ohne dass das Design leidet.

1. Klare Struktur im Template

Barrierefreiheit fängt nicht beim Kontrast an, sondern bei der Struktur.

Eine Seite → eine H1 (im Template, nicht im Content mehrfach).
Darunter H2/H3 sauber staffeln.
Keine „leeren“ Container nur für Abstand – besser gap nutzen.
Page-Template im Quellcode einmal durchgehen und die Reihenfolge prüfen: Body → Skip-Link Header → Content → Footer.

Warum? Screenreader lesen in der Reihenfolge, nicht nach Optik.

2. Skip-Link sichtbar lassen

GeneratePress bringt einen Skip-Link mit – viele Themes auch. Oft wird der aber „wegdesignt“.

Prüfen: erscheint „Zum Inhalt springen“, wenn man mit der Tab-Taste startet?
Wenn nicht: kleine CSS-Regel ergänzen, damit der Link beim Fokus sichtbar wird.
Bitte nicht löschen – das ist einer der einfachsten Accessibility-Wins überhaupt.

Wichtig ist: Der Skip-Link steht im Body ganz oben vor dem Header und verweist auf den Content-Bereich (#content). Wenn Sie eigene Layout-Container davor setzen (z.B. Off-Canvas, Notice-Bar), müssen Sie den Skip-Link wieder dorthin ‘retten’.

Die meisten Probleme sitzen nicht im Content, sondern im Menü.

Öffnet sich das Mobile-Menü per Tastatur?
Kommt man wieder raus (ESC)?
Hat der Menü-Button ein sprechendes aria-label („Menü öffnen“ statt nur Icon)?
Wenn per GB ein eigenes Offcanvas gebaut ist: Fokus im Off-Canvas halten, solange es offen ist.

Merksatz: Wenn man es allein mit der Tastatur nicht bedienen kann, ist es nicht barrierefrei.

4. Kontraste & Farbvarianten

Hier fliegen hübsche Corporate-Designs oft raus.

Alle globalen Farben, die im Theme angelegt sind, einmal prüfen.
Buttons in allen Zuständen testen (hover, focus, disabled).
Text auf Bild unbedingt mit Overlay absichern.
Falls ein Corporate-Grünton zu hell ist: Alternative „Barrierefrei“-Farbe definieren.

Formulare sind für BFSG das, was für SEO der Title ist: ohne geht’s nicht.

Jedes Feld braucht ein richtiges Label, nicht nur Placeholder.
Pflichtfelder nicht nur per Farbe kennzeichnen.
Fehlermeldungen dort ausgeben, wo sie entstehen – und per ARIA verbinden.
In WooCommerce: Fehlermeldungen und Hinweise sind vorhanden, aber nicht immer ideal ausgezeichnet → kann man in einem Child-Theme anpassen.

6. Medien: Bilder, Icons, SVG

In WordPress legt man viele Bilder „schnell mal“ rein.

Bilder bekommen ihren Alt-Text aus der Mediathek – also dort sauber pflegen.
Deko-Icons, Pfeile, Accordion-Symbole: aria-hidden="true" focusable="false" → sonst quatscht der Screenreader alles vor.
Große Bildbereiche (Hero, Header) → Text nicht einfach drüberlegen, ohne Kontrast zu prüfen.

7. Accordion, Tabs, FAQ

Sie arbeiten viel mit Accordions – völlig okay, aber:

Button braucht aria-expanded und das muss beim Öffnen auf true springen.
Inhalt braucht aria-controls bzw. eine saubere Zuordnung.
Tastatur: Öffnen/schließen mit Enter oder Space.

8. Loops, Listen, Event-Ausgaben

Sie haben viele dynamische Ausgaben über GenerateBlocks – Termine, Events, Produkte.

Reihenfolge logisch machen: Datum → Titel → Ort → Aktion (nicht durcheinander).
Wenn du Farben für „ausverkauft“ oder „nur noch 3 Plätze“ nutzt: immer Text dazu.
Tabellen wirklich nur für tabellarische Daten nutzen – nicht für Layout.

So kommt auch jemand mit Screenreader an die Infos ran, die Sie im Frontend so schön gestaltet haben oder haben lassen.

9. WooCommerce & „elektronischer Geschäftsverkehr“

Sobald etwas verkauft oder gebucht wird, schaut man genauer hin.

Varianten-Auswahl muss per Tastatur möglich sein – besonders, wenn du eigene Texte („Wähle eine Veranstaltung“) ausgibst.
Hinweis-Texte („Noch 2 Plätze“) nicht nur farbig, sondern als Klartext.
Fehlermeldungen im Checkout müssen lesbar und eindeutig sein.

10. Fokus-Stile nicht killen

Sehr beliebt: outline: none; – und dann wundert man sich.

Alle interaktiven Elemente müssen im Fokus sichtbar sein.
Wenn dir der Standard nicht gefällt → eigenen Fokus-Stil definieren (z. B. 1px Outline in der Akzentfarbe).
In Global Styles durchziehen, nicht nur auf einer Seite.

Das ist einer der schnellsten Punkte, um „wir haben an Barrierefreiheit gedacht“ zu zeigen.

11. Animationen, Slider, Effekte

Schön ist erlaubt – aber steuerbar.

Autoplay-Slider brauchen eine Möglichkeit zum Stoppen.
Längere Einblend-Animationen vermeiden.
prefers-reduced-motion respektieren, damit Nutzer mit Einschränkungen nicht durchdrehen.

Gerade bei Präsentationsseiten mit viel Bildmaterial ein Punkt.

12. Redaktion & B2B-Kennzeichnung

BFSG ist nicht nur Technik, es ist auch Zielgruppe klar benennen.

Wenn Sie sich auf B2B berufen wollen: klar im Footer/Impressum kennzeichnen („Dieses Angebot richtet sich ausschließlich an Unternehmen“).
Redaktion bekommt eine kleine Checkliste: Alt-Text, Linktexte, Kontrast, Downloads barrierefrei.
So verhindern Sie, dass die Seite technisch barrierearm ist – und beim nächsten Beitrag alles wieder kaputt geschrieben wird.

Bonus: ND Accessibility einsetzen

Wir haben für genau diesen „Let’s-make-it-better“-Schritt unser eigenes kleines Tool: „ND Accessibility“.

Das macht keine Magie und ersetzt auch keine strukturelle Barrierefreiheit – aber es gibt Nutzern Werkzeuge in die Hand:

Schriftgrößen-Anpassung (größer/kleiner)
Graustufen-Darstellung
Link-Unterstreichungen für klare Erkennbarkeit
Kontrast-Verstärkungen für schwächere Augen

Das Tool kann man hier auf der Seite ausprobieren (siehe links unten in der Ecke).

So zeigen Sie: „Wir haben es verstanden – und wir geben euch Optionen.“

Fazit

Wenn Sie sich nicht sicher sind, welche dieser 12 Stellen bei Ihrer Website tatsächlich ein Problem machen:

Ich kann Ihnen einen BFSG-/Barrierefreiheits-Check für Ihre WordPress-Seite erstellen – speziell für GeneratePress/GenerateBlocks-Setups.

Kontakt