Barrierefreie Inhalte im Block-Editor erstellen: Bilder, Überschriften, Links und Tabellen
So pflegen Sie Beiträge und Seiten im WordPress-Block-Editor barrierearm: Alternativtexte, echte Überschriften, verständliche Links, Tabellen mit Kopfzeile, Sprachkennzeichnung, Kontrast und eine kurze Prüfung per Tastatur.
Mit KI erstellt – redaktionelle Prüfung ausstehend
WerbelinksMit * markierte Links sind Werbelinks: Bei einem Kauf erhalten wir eine Provision, der Preis bleibt gleich. Mehr dazu
Barrierefreiheit einer Website entscheidet sich nicht nur beim Theme. Ein Großteil der Hürden entsteht beim täglichen Schreiben: ein Bild ohne Alternativtext, eine Zwischenüberschrift, die nur fett gesetzt ist, ein Link mit dem Text „hier“, eine Tabelle ohne Kopfzeile oder ein englischer Fachbegriff, den der Screenreader deutsch ausspricht. Der Block-Editor von WordPress bietet für all das eingebaute Werkzeuge, man muss sie nur kennen. Diese Anleitung richtet sich an alle, die Inhalte pflegen, und zeigt Block für Block, wie Sie barrierearme Beiträge und Seiten erstellen, woran Sie Probleme erkennen und wie Sie Ihre Inhalte selbst prüfen. Die rechtlichen Anforderungen und die technische Seite des Themes behandelt eine eigene Anleitung, auf die wir am Ende verweisen.
Voraussetzungen
- WordPress: Version 7.1 oder eine aktuelle Vorgängerversion mit dem Block-Editor. Die deutschen Bezeichnungen entsprechen WordPress 7.1.
- Rolle: Redakteur oder Administrator, für eigene Beiträge genügt Autor. Zum Bearbeiten von Mediathek-Einträgen brauchen Sie die Berechtigung zum Hochladen von Dateien.
- Theme: ein Theme, das Grundlagen wie Sprachangabe im HTML und Sprunglink mitbringt. Twenty Twenty-Five liefert beides.
- Browser: ein aktueller Browser mit Entwicklerwerkzeugen; optional ein Screenreader wie NVDA unter Windows oder VoiceOver auf dem Mac.
- Backup: Für das Bearbeiten von Inhalten reichen die Revisionen von WordPress. Vor Massenänderungen per WP-CLI brauchen Sie eine Datenbanksicherung.
- Webspace: keine besonderen Anforderungen, gewöhnliches Webhosting genügt.
Schritt 1: Bilder mit Alternativtext versehen
Menschen, die nicht sehen, erfahren über den Alternativtext, was ein Bild aussagt. Wählen Sie im Editor den Bild-Block aus. In der Seitenleiste unter Einstellungen steht das Feld Alternativtext. Darunter führt der Link „Beschreibe den Zweck des Bildes.“ zu einer Entscheidungshilfe, und der Hinweis „Leer lassen, wenn es dekorativ ist.“ erklärt den zweiten Fall.
Beschreiben Sie also die Funktion des Bildes im Zusammenhang, nicht jedes Detail. Ein Teamfoto auf der Kontaktseite bekommt etwa „Das Serviceteam mit fünf Personen vor dem Firmengebäude in Dresden“. Ein Bild, das als Link dient, beschreibt das Ziel, etwa „Zur Preisliste“. Enthält das Bild Text, etwa ein Plakat, gehört dieser Text in den Alternativtext. Rein schmückende Bilder bleiben leer; WordPress gibt dann alt="" aus, und Screenreader überspringen das Bild. Verzichten Sie auf „Bild von …“, denn das sagt der Screenreader ohnehin.
Ein Stolperstein: Der Alternativtext in der Mediathek wird beim Einfügen in den Block übernommen, aber spätere Änderungen in der Mediathek wirken nicht auf bereits eingefügte Bilder. Korrigieren Sie bestehende Beiträge deshalb im Block selbst. Wie Sie Bilder ohne Alternativtext in der Mediathek aufspüren, zeigt Barrierefreiheit in WordPress: Anforderungen des BFSG praktisch umsetzen.
Verifizieren: Im Quelltext der Seite hat jedes <img> ein alt-Attribut, bei Schmuckbildern leer, bei allen anderen mit einem sinnvollen Text.
Schritt 2: Mit echten Überschriften gliedern
Viele Screenreader-Nutzer springen von Überschrift zu Überschrift, um sich einen Überblick zu verschaffen. Das funktioniert nur mit echten Überschriften. Ein fett gesetzter Absatz sieht aus wie eine Überschrift, ist für Hilfstechnik aber ein normaler Absatz. Nutzen Sie deshalb den Block Überschrift und wählen Sie die Ebene nach der Gliederung, nicht nach der Schriftgröße. Die Größe regeln Sie separat in der Seitenleiste.
Der Beitragstitel ist bei den meisten Themes die Überschrift der Ebene 1. Im Inhalt beginnen Sie daher mit H2, Unterpunkte bekommen H3, ohne Ebenen zu überspringen. Die Kontrolle liefert der Editor selbst: Oben links öffnet das Symbol für die Dokumentenübersicht die Listenansicht aller Blöcke und im Reiter Übersicht die Überschriftenstruktur. Dort markiert WordPress Probleme direkt:
(Leere Überschrift)
(Falsche Überschriftsebene)
(Mehrere H1-Überschriften werden nicht empfohlen)Verifizieren: Der Reiter „Übersicht“ in der Dokumentenübersicht zeigt eine lückenlose Treppe aus H2 und H3 ohne einen der drei Hinweise.
Schritt 3: Verständliche Links setzen
Screenreader können alle Links einer Seite als Liste vorlesen. Zehnmal „hier klicken“ hilft dann niemandem. Die Richtlinien für barrierefreie Webinhalte (WCAG) verlangen in Kriterium 2.4.4, dass der Zweck eines Links aus dem Linktext oder seinem direkten Zusammenhang erkennbar ist. Formulieren Sie das Ziel in den Linktext: „Preisliste 2027 als PDF herunterladen“ statt „Die Preisliste finden Sie hier“.
Beim Setzen eines Links bietet WordPress die Option In einem neuen Tab öffnen. Nutzen Sie sie sparsam, denn ein unerwartet neues Fenster verwirrt, besonders wenn der Zurück-Knopf dann nicht mehr funktioniert. Wenn es nötig ist, etwa bei PDFs, weisen Sie im Linktext darauf hin, zum Beispiel „(öffnet in neuem Tab)“. WordPress ergänzt bei solchen Links automatisch rel="noreferrer noopener", einen Hinweis für Screenreader setzt es nicht.
Verifizieren: Lesen Sie nur die Linktexte eines Beitrags hintereinander. Jeder muss für sich verständlich sein.
Schritt 4: Tabellen, Listen und aufklappbare Inhalte richtig nutzen
Tabellen sind für Daten da, nicht für Layout. Im Block Tabelle schalten Sie in der Seitenleiste unter Einstellungen die Option Kopfzeile ein. WordPress macht die erste Zeile dann zu <th>-Zellen in einem <thead>, sodass ein Screenreader beim Vorlesen jeder Zelle die passende Spaltenüberschrift nennt. Eine Beschriftung unter der Tabelle über „Beschriftung hinzufügen“ erklärt, was die Tabelle zeigt. Verzichten Sie auf verbundene Zellen und leere Zeilen als Abstandshalter.
Aufzählungen setzen Sie mit dem Block Liste statt mit Bindestrichen im Absatz. Dann meldet der Screenreader „Liste mit fünf Einträgen“, und Nutzer wissen, was sie erwartet. Für häufige Fragen eignet sich der Block Details: Er erzeugt ein natives <details>-Element mit <summary>, das mit Tastatur und Screenreader ohne zusätzliches Skript bedienbar ist.
Verifizieren: Im Quelltext stehen Tabellenköpfe als <th>, Listen als <ul> oder <ol> und aufklappbare Fragen als <details>.
Schritt 5: Sprache, Farbe und Kontrast beachten
Die Sprache der Website setzt WordPress im HTML-Kopf, auf einer deutschen Installation als <html lang="de">. Fremdsprachige Passagen kennzeichnen Sie selbst, damit der Screenreader sie richtig ausspricht; WCAG-Kriterium 3.1.2 fordert das für Textteile in anderer Sprache, nimmt Eigennamen und eingedeutschte Fachbegriffe aber aus. Markieren Sie etwa ein englisches Zitat, öffnen Sie in der Block-Werkzeugleiste das Menü mit weiteren Formatierungen und wählen Sie Sprache. Tragen Sie den Sprachcode ein, etwa en, und bestätigen Sie mit „Anwenden“. Im Test erzeugte das im Frontend ein <bdo>-Element mit lang="en" und der Textrichtung „Links nach rechts“.
Wenn Sie Text- und Hintergrundfarben im Editor wählen, prüft WordPress den Kontrast und zeigt bei zu schwachem Kontrast den Hinweis „Diese Farbkombination ist unter Umständen für manche Menschen schwer lesbar.“ WCAG 1.4.3 verlangt für normalen Text ein Kontrastverhältnis von mindestens 4,5:1, für großen Text 3:1. Transportieren Sie Informationen zudem nie allein über Farbe: „Die rot markierten Felder“ hilft Menschen mit Farbfehlsichtigkeit nicht.
Verifizieren: Kein Block zeigt die Kontrastwarnung, und fremdsprachige Zitate tragen im Quelltext ein lang-Attribut.
Schritt 6: Den fertigen Beitrag selbst prüfen
Die Werkzeuge des Editors finden nicht alles. Nehmen Sie sich vor der Veröffentlichung wichtiger Seiten fünf Minuten für eine Prüfung im Frontend:
- Tastatur: Legen Sie die Maus weg und gehen Sie mit der Tabulatortaste durch die Seite. Der erste Tabulatorschritt sollte bei Themes wie Twenty Twenty-Five den Link „Zum Inhalt springen“ zeigen. Jeder Link und jedes Formularfeld muss sichtbar hervorgehoben werden.
- Zoom: Vergrößern Sie auf 200 Prozent. Text darf nicht abgeschnitten werden oder überlappen.
- Screenreader: Wenn verfügbar, lassen Sie sich die Seite einmal vorlesen und springen Sie per Überschriften-Navigation durch.
Barrierefreiheit ist keine einmalige Aufgabe. Jeder neue Beitrag, jedes Theme-Update und jedes neue Plugin kann etwas verändern, etwa den sichtbaren Tastaturfokus oder die Farben. Wer die technische Seite dieser Pflege nicht selbst im Kalender halten möchte, kann sie abgeben: Die WordPress-Wartung von wordpressupdate.de spielt Updates von WordPress, Plugins und Themes mit Kompatibilitätsprüfung ein und sichert die Website wöchentlich auf externen Speicher.
Verifizieren: Sie konnten die Seite vollständig per Tastatur bedienen, und bei 200 Prozent Zoom bleibt alles lesbar.
Typische Fehler
- Dateiname als Alternativtext: „IMG_4711.jpg“ oder „bild1“ ist schlechter als ein leerer Text. Beschreiben Sie den Zweck oder lassen Sie das Feld bei Schmuckbildern leer.
- Alternativtext in der Mediathek geändert, Seite zeigt den alten: Bereits eingefügte Bilder behalten ihren Text. Ändern Sie ihn im Block.
- Überschrift nach Optik gewählt: Eine H4 direkt unter dem Titel, weil sie „schön klein“ ist. Wählen Sie die richtige Ebene und passen Sie die Schriftgröße an.
- Text in Bildern: Angebote oder Öffnungszeiten als Grafik sind für Screenreader unsichtbar und beim Zoom unscharf. Schreiben Sie sie als Text.
- Tabelle ohne Kopfzeile: Die Werte lassen sich beim Vorlesen keiner Spalte zuordnen. Schalten Sie die Kopfzeile im Block ein.
Häufige Fragen
Muss jedes Bild einen Alternativtext haben?
Jedes Bild braucht ein alt-Attribut. Bei Bildern mit Aussage enthält es eine Beschreibung, bei reinen Schmuckbildern bleibt es leer. WordPress gibt das leere Attribut automatisch aus, wenn Sie das Feld nicht ausfüllen.
Reicht ein Plugin, das die Website barrierefrei macht?
Nein. Plugins mit Einblendungen für Schriftgröße oder Kontrast ersetzen keine sauber aufgebauten Inhalte. Prüf-Plugins können helfen, Fehler zu finden, beheben müssen Sie sie im Inhalt.
Wie lang sollte ein Alternativtext sein?
So kurz wie möglich, so lang wie nötig. Meist genügt ein Satz. Ausführliche Inhalte wie Diagramme erklären Sie besser im Text oder in einer Bildunterschrift.
Testumfang
Wir haben unter WordPress 7.1.2 mit Twenty Twenty-Five einen Testbeitrag veröffentlicht und den erzeugten Quelltext geprüft. Sprachangabe und Tabellenkopf kamen genau so an, wie hier beschrieben. Einen echten Screenreader-Durchlauf und andere Themes haben wir nicht getestet. Prüfen Sie Ihre wichtigsten Seiten deshalb selbst mit der Tastatur und möglichst auch mit einem Screenreader.
Fazit
Barrierearme Inhalte entstehen durch Gewohnheiten beim Schreiben: Alternativtext beim Einfügen eines Bildes, echte Überschriften, sprechende Links, Tabellen mit Kopfzeile. Der Block-Editor unterstützt das mit Dokumentenübersicht, Kontrastwarnung und Sprachformatierung, und mit einer kurzen Tastaturprüfung vor der Veröffentlichung fangen Sie das meiste ab. Das Theme und die technische Basis müssen dabei mitspielen; wenn Sie deren Pflege lieber abgeben, übernimmt das die WordPress-Wartung mit persönlicher Betreuung.
