Zum Hauptinhalt springen

Fix-Guide · WordPress Block-Editor

Die 5 häufigsten BFSG-Findings — und wie Sie sie in Gutenberg beheben.

Dieser Guide ist für den WordPress-Block-Editor (Standard seit WordPress 5.0 / 2018). Sie nutzen Elementor, Divi oder Avada? Das Konzept hier funktioniert auch dort — nur die UI ist anders. Builder-spezifische Guides folgen.

Lesezeit ca. 8 Min.5 Findings · Gutenberg ≥ 6.0
Von ·

Kontext · Block-Editor (Gutenberg)

Der Block-Editor ist seit WordPress 5.0 (Ende 2018) der Standard und wird auf rund 60 % aller aktiv gepflegten WordPress-Sites genutzt. Persona: kleine Unternehmen, Solo-Selbstständige und Blogs, die kein zusätzliches Builder-Plugin installiert haben und direkt mit dem Theme arbeiten. Out-of-the-box ist Gutenberg der barrierefreundlichste Editor — Alt-Text-Felder sind im Block-Inspector direkt sichtbar, die Heading-Hierarchie wird beim Einfügen vorgeschlagen, Standard-Kontaktblöcke liefern echte Labels. Typische Gutenberg-spezifische Stolperstellen: das Alt-Feld der Mediathek schreibt nicht zurück in den Block (manuelle Pflege pro Bild nötig); Custom-Blöcke aus Plugins bringen oft keine ARIA-Attribute mit; und das Cover-Block-Hintergrundbild hat ein eigenes Alt-Feld, das viele übersehen. Wenn Sie mit Gutenberg arbeiten, sind Sie in der besten Ausgangsposition — die folgenden fünf Findings betreffen Sie zu deutlich geringeren Anteilen als Builder-Nutzer:innen.

Inhalt

  1. 01Alt-Texte direkt im Block-Inspector
  2. 02Heading-Hierarchie über Überschriften-Blöcke
  3. 03Farbkontrast über die Block-Style-Palette
  4. 04Tastatur-Bedienbarkeit der Core-Blöcke
  5. 05Formulare über das Standard-Kontaktblock-Setup
Kritisch01 · WCAG 1.1.1

Alt-Texte direkt im Block-Inspector

Screenreader können Bilder nicht "sehen". Im Block-Editor finden Sie das Alt-Text-Feld direkt im rechten Block-Inspector — anders als bei Page-Buildern müssen Sie nicht in die Media Library zurück.

So fixen Sie das in Gutenberg

  1. Öffnen Sie die Seite oder den Beitrag im Editor.
  2. Klicken Sie auf das Bild — die Sidebar rechts zeigt jetzt die Block-Einstellungen.
  3. Im Abschnitt „Bildeinstellungen" finden Sie ein Feld „Alt-Text (Alternativtext)".
  4. Beschreiben Sie das Bild in einem kurzen, vollständigen Satz — keine Wörter wie „Bild" oder „Foto".
  5. Speichern. Im Frontend ist nichts sichtbar — der Text wird nur Screenreadern vorgelesen.

Gut

Drei Yogis in einer Vorbeuge auf einer Holzterrasse im Morgenlicht.

Vermeiden

Bild · yoga.jpg · IMG_2483

Dekorative Bilder

Reine Deko-Bilder (Linien, Schatten, Trenner) sollten keinen Alt-Text bekommen — sonst liest der Screenreader sie unnötig vor. In Gutenberg ab Version 6.5 gibt's dafür den Toggle „Image is decorative" in den Bildeinstellungen.

Wichtig02 · WCAG 2.4.6

Heading-Hierarchie über Überschriften-Blöcke

Überschriften strukturieren die Seite. Im Block-Editor wählen Sie pro Heading-Block H1 bis H6 — eine H1 pro Seite, danach lückenlos H2 → H3.

Die goldene Regel

  • Genau eine H1 pro Seite — das ist die Hauptüberschrift, normalerweise der Titel.
  • H2 für Hauptabschnitte (z. B. „Über uns", „Leistungen", „Kontakt").
  • H3 für Unterabschnitte innerhalb eines H2-Blocks.
  • Niemals Stufen überspringen — also kein H2 direkt nach einem H4.

So prüfen Sie das in Gutenberg

  1. Im Editor oben links auf das „Details"-Icon (Listen-Symbol) klicken.
  2. Wählen Sie „Dokumentübersicht" — Gutenberg zeigt eine Liste aller Überschriften mit Ebene.
  3. Gutenberg warnt rot, wenn die Hierarchie kaputt ist (z. B. „Heading-Level übersprungen").
  4. Bei Heading-Block ändern Sie die Stufe über die Toolbar (H1/H2/H3/H4-Buttons).

Typischer Fehler

Sie nutzen einen Heading-Block, weil er visuell wie eine Überschrift aussehen soll — obwohl es eigentlich Fettdruck wäre. Lösung: normale Absätze nutzen und mit Fettdruck formatieren. Überschriften sind semantische Marker, kein Styling-Werkzeug.

Kritisch03 · WCAG 1.4.3

Farbkontrast über die Block-Style-Palette

Helle Grautöne auf weiß sehen schick aus — sind für Menschen mit Sehschwäche aber unlesbar. Block-Editor warnt nicht aktiv; prüfen Sie die Custom-Color-Werte selbst.

Die WCAG-Mindestwerte

  • Normaler Text: mindestens 4.5:1 Kontrast zum Hintergrund.
  • Großer Text (ab 18 pt bzw. 14 pt fett): mindestens 3:1.
  • UI-Elemente und Icons: ebenfalls 3:1 zum Hintergrund.

So prüfen Sie einzelne Blöcke

  1. Klicken Sie auf einen Text-Block. In der Sidebar rechts unter „Farbe".
  2. Gutenberg zeigt seit Version 5.0 eine Warnung „Diese Farbkombination ist möglicherweise schwer lesbar." wenn der Kontrast nicht reicht.
  3. Externer Check für genaue Werte: WebAIM Contrast Checker (öffnet in neuem Fenster).

Theme-weit umstellen (für Entwickler:innen)

Die Theme-Farben liegen bei modernen Block-Themes in der theme.json unter settings.color.palette. Alle Farben in der Palette müssen gegen Weiß und Schwarz mindestens 4.5:1 erreichen — sonst entsteht beim ersten Einsatz schon ein Verstoß.

Klassische Stolperfallen

  • Hellgrauer Text (#999) auf weiß — Kontrast nur 2.85:1.
  • Blauer Link auf hellblauem Hintergrund (Coach-Design-Falle).
  • Placeholder-Text in Formularen — meist deutlich unter 4.5:1.
Kritisch04 · WCAG 2.1.1

Tastatur-Bedienbarkeit der Core-Blöcke

Nicht jede:r benutzt eine Maus. Die Core-Blöcke (Button, Navigation, Cover) sind tastaturfreundlich — Custom-Blöcke aus Plugins oft nicht.

Der 30-Sekunden-Test

  1. Öffnen Sie Ihre Seite im Browser.
  2. Klicken Sie nicht mit der Maus — drücken Sie nur die Tab-Taste.
  3. Können Sie jeden Link, jeden Button, jedes Formularfeld erreichen?
  4. Sehen Sie immer einen sichtbaren Focus-Ring (typischerweise blauer Rahmen)?
  5. Bei einem Modal: schließt es mit Esc?

Häufige Probleme + Lösung

  • Hamburger-Menü nicht per Tastatur bedienbar: Statt JS-Custom-Buttons den Block „Navigation" nutzen — der ist seit Gutenberg 6.0 standardmäßig tastatur-fest.
  • Kein sichtbarer Focus-Ring: Vielleicht hat Ihr Theme oder ein Plugin outline: none gesetzt. Im Custom-CSS-Bereich des Customizers entfernen oder mit outline: 2px solid #1d4ed8 überschreiben.
  • Skip-Link fehlt: Die meisten modernen Block-Themes (twenty-twenty-three+, Block-Themes mit theme.json) liefern „Skip to content" mit. Bei älteren Themes braucht's ein Plugin wie Skip-To Toolbar Menu oder ein Snippet im Theme-Header.
Wichtig05 · WCAG 3.3.2

Formulare über das Standard-Kontaktblock-Setup

Ohne Label wissen Screenreader nicht, was in das Feld gehört. Placeholder-Text alleine reicht nicht — das Block-Editor-Kontaktformular liefert echte Labels, viele Plugin-Forms nicht.

Wenn nur ein Placeholder „Ihr Name" im Feld steht und sonst nichts, sind drei Dinge kaputt:

  • Screenreader-Nutzer:innen hören gar nichts.
  • Beim Antippen verschwindet die Erklärung.
  • Der Kontrast von Placeholder-Text reicht meist nicht für 4.5:1.

Pro Form-Plugin

Contact Form 7

Im Form-Editor jedem Feld ein <label> voranstellen:

<label>Ihr Name (Pflichtfeld)
  [text* your-name]
</label>

Gravity Forms

Im Field-Editor: „Field Label" ausfüllen (nicht „Placeholder"!). Unter Appearance → Field Label Visibility auf „Above Inputs" stellen — nicht „Hidden". Hidden ist nur aus design-Gründen erlaubt, wenn dafür aria-label gesetzt ist.

Forminator

Field-Settings → „Field Label" + „Field Description". Beide werden automatisch als <label> und aria-describedby gerendert.

Fertig mit den Fixes? Erneut prüfen.

Sie haben die Top-5 erledigt — gut. Aber WordPress-Updates, Plugin-Aktualisierungen und neue Inhalte können neue Issues erzeugen. Ein erneuter Scan kostet 60 Sekunden.

Erneut scannen

Sie nutzen Elementor, Divi oder Avada? Builder-spezifische Guides folgen. Tragen Sie sich auf der Early-Access-Liste ein — Sie erhalten Benachrichtigung sobald sie online sind.