Wenn ALT-Texte einfach verschwinden

Es war eigentlich ein ganz normales Bild, das ich in meinem Testartikel einfügte. ALT-Text? Den hatte ich vorher sauber in der Mediathek eingetragen. Doch beim Check der Seite fiel uns auf: Da fehlt doch was. Kein ALT-Text weit und breit – weder im HTML-Code noch im Screenreader.

Was war passiert? Der Gutenberg-Editor hat den ALT-Text aus der Mediathek nicht automatisch übernommen. Und das ist kein Bug, sondern (leider) ein Feature.

Der Workaround, der wirklich hilft

So trägst du den ALT-Text korrekt ein

Im Workshop haben wir gemeinsam – mit einem kleinen Tipp von ChatGPT – eine einfache Lösung gefunden:

1. Bild einfügen wie gewohnt im Gutenberg-Editor.
2. Im Bildblock selbst den ALT-Text manuell ergänzen.
3. Nicht auf die Mediathek verlassen, sondern jedes Bild im Beitrag noch einmal prüfen.

Bonus-Tipp für mehr Übersicht

Wenn du regelmäßig mit vielen Bildern arbeitest, lohnt es sich, einen visuellen Check im HTML-Code zu machen oder ein Plugin zur Barrierefreiheitsprüfung (z. B. WAVE oder Accessibility Checker) einzusetzen.

Fortgeschrittene Lösung: ALT-Text per Snippet automatisch ergänzen

Dein Snippet für die functions.php

Du möchtest es automatisiert lösen? Kein Problem! Mit diesem Snippet prüft WordPress beim Rendern des Bildblocks, ob im Editor ein ALT-Text gesetzt wurde. Falls nicht, wird automatisch der ALT-Text aus der Mediathek verwendet – sofern vorhanden.

function replace_empty_gutenberg_image_alt( $block_content, $block ) {
	if ( $block['blockName'] === 'core/image' && isset( $block['attrs']['id'] ) ) {
		$image_id = $block['attrs']['id'];
		$media_alt = get_post_meta( $image_id, '_wp_attachment_image_alt', true );

		// Nur ersetzen, wenn ALT im Block leer ist
		if ( ! empty( $media_alt ) && strpos( $block_content, 'alt=""' ) !== false ) {
			// Ersetze alt=""
			$block_content = str_replace( 'alt=""', 'alt="' . esc_attr( $media_alt ) . '"', $block_content );
		}
	}
	return $block_content;
}
add_filter( 'render_block', 'replace_empty_gutenberg_image_alt', 10, 2 );

Was das Snippet bewirkt:

• Prüft beim Rendern, ob im Bildblock ein ALT-Text gesetzt ist.
• Wenn kein ALT-Text im Block vorhanden ist, wird geprüft, ob in der Mediathek einer existiert.
• Falls ja, wird dieser automatisch eingefügt.
• Funktioniert ausschließlich mit dem Standard-Bildblock von Gutenberg.

⚠️ Hinweise:

• Das Snippet gehört in die functions.php deines Child-Themes oder in ein individuelles Plugin.
• Achte darauf, regelmäßig zu testen, ob nach WordPress-Updates alles wie gewünscht funktioniert.

Warum du bei Blogartikeln auf Gutenberg setzen solltest

Gutenberg vs. Page-Builder: Was besser für Barrierefreiheit ist

Ich weiß, Page-Builder wie Elementor, Divi oder Avada haben ihre Berechtigung – gerade bei komplexen, visuell aufwendigen Seiten. Aber für Blogartikel? Da rate ich ganz klar zu Gutenberg.

Vorteile von Gutenberg bei Blogartikeln

• Bessere Performance: Kein überladener Code, schnellere Ladezeiten
• Semantisch korrektes HTML: wichtig für SEO und Screenreader
• Weniger Plugin-Abhängigkeit: alles ist updatefreundlicher und sicherer
• Einfachere Barrierefreiheit: klare Struktur, saubere Auszeichnung
  

Page-Builder erzeugen oft verschachtelten, unübersichtlichen Code – was es für Screenreader und Suchmaschinen schwer macht, deine Inhalte korrekt zu interpretieren. Bei langen Artikeln wird das schnell zum Chaos.

Checkliste: So machst du deine Bilder wirklich barrierefrei

• ALT-Texte direkt im Gutenberg-Block ergänzen
• Bilder auf rein dekorativen Nutzen prüfen – wenn ja: role="presentation" setzen
• Aussagekräftige ALT-Texte schreiben, keine Keyword-Wüste
• Keine redundanten Texte („Bild von einer Frau mit Laptop“, wenn das ohnehin klar ist)
• Tools zur Barrierefreiheitsprüfung nutzen (z. B. wave.webaim.org, axe DevTools, oder Screenreader-Check)

Fazit: Kleines Detail, große Wirkung

Barrierefreiheit beginnt im Kleinen – und der ALT-Text ist ein zentraler Bestandteil davon. Der Gutenberg-Editor ist ein starkes Werkzeug für strukturierte, zugängliche Blogartikel – wenn wir ihn richtig nutzen.

Also: Verlass dich nicht auf die Mediathek. Denk an den ALT-Text im Editor. Und schreib Inhalte, die nicht nur gut aussehen, sondern auch für alle zugänglich sind – ganz egal, wie sie konsumiert werden.