Wenn ALT-Texte einfach verschwinden

Es war ein ganz normales Bild, das ich in meinem Testartikel einfügte. ALT-Text? Den hatte ich wie bereits gesagt vorher sauber in der WordPress 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.

So funktioniert der Gutenberg-Editor mit ALT-Texten

Warum WordPress den ALT-Text nicht automatisch übernimmt

Wenn du ein Bild im Gutenberg-Editor einfügst, übernimmt WordPress nicht den ALT-Text aus der Mediathek. Stattdessen erwartet der Editor, dass du den ALT-Text direkt im Bildblock im Editor selbst ergänzt. Macht ja auch Sinn, damit der Bezug zum Artikel gegeben ist.

In der Praxis halten ich und viele meiner Kolleginnen es aber so, dass wir die Bilder hochladen und dann gleich mit den richtigen Texten ausstatten. Dann vergisst man es später auch nicht. Egal wo das Bild dann genutzt wird, kann man sichergehen, dass es barrierefrei beschrieben ist.

Häufig wird ein Bild ja auch nur einmalig auf der Website genutzt, da reicht das völlig aus. Wenn man es öfter nutzt und dann vielleicht die Beschreibung und ALT-Texte noch SEO-optimiert ändern will, kann man das normalerweise dann noch direkt im Bildblock machen (wie ja auch im Gutenberg) und dies überschreibt dann gewöhnlicherweise einfach die Standard-Angaben aus der Mediathek.

Der Gutenberg-Editor reagiert da aber anders: er ignoriert die Mediathek-Infos!

Das bedeutet:
Selbst wenn in der Mediathek alles korrekt hinterlegt ist, wird im Artikel nichts davon angezeigt, solange du den ALT-Text nicht explizit im Editorfeld beim Bild einträgst.

Das Problem mit leeren ALT-Texten auf deiner Website:

• Für Nutzer*innen von Screenreadern fehlen Bildbeschreibungen
• Die Seite ist nicht barrierefrei
• Auch SEO-Potenzial geht flöten, denn Google nutzt ALT-Texte für die Bildersuche und Relevanzbewertung

Der Workaround, der wirklich hilft

So trägst du den ALT-Text korrekt ein

Im Workshop haben wir gemeinsam eine einfache Lösung gefunden, die wie gesagt nicht ganz so schön, aber wohl so vorgesehen ist:

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. „Silktide“) einzusetzen. Da siehst du sofort ob und welche Texte gesetzt sind.

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

Snippet für die functions.php

Das „Verhalten“ vom Gutenberg-Editor hat mir ehrlich gesagt nicht so zugesagt, da ich gerne alles default-mäßig in der Mediathek stehen haben will. Nur bei „Sonderfällen“ überschriebe ich es dann nochmal.

Für Websites nutze ich meistens Pagebuilder und nicht Gutenberg. Aber die Bloginhalte schalte ich dabei trotzdem bevorzugt auf den WordPress-Editor um (mehr dazu unten). Daher habe ich es bei mir so umgestellt, dass auch Mediathek-Texte genutzt werden.

Du möchtest es auch automatisiert lösen? Kein Problem! Mit diesem kleinen 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

Warum du bei Blogartikeln auf Gutenberg setzen solltest

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

Ich weiß, Pagebuilder wie Elementor, Divi oder Avada haben ihre Berechtigung und ich nutze sie auch!! Gerade bei komplexen, visuell aufwendigen Seiten, sind sie wuuuunderbar! Aber für Blogartikel? Da rate ich ganz klar zu Gutenberg. Ich stelle es dann so um, dass das Grundgerüst rund um den Blogartikel vom Pagebuilder generiert wird, der eigentliche Inhalt (und auch das Verfassen) Gutenberg-Inhalt ist.

Vorteile von Gutenberg bei Blogartikeln

• Zukunftssicher: Falls du später einmal sehr viele Blogbeiträge hast und deine Website mit einem anderen Pagebuilder relaunchen willst, müsstest du ALLE Artikel händisch anpassen. So bleibt dir das erspart, und du lädst dann einfach wieder den Inhalt in das Layout hinein.
• Bessere Performance: Kein überladener Code, schnelle Ladezeiten
• Semantisch korrektes HTML: wichtig für SEO und Screenreader… manche Themes / Pagebuilder sind darin aktuell noch nicht sehr gut
• Weniger Plugin-Abhängigkeit: alles ist updatefreundlicher und sicherer
• Einfachere Barrierefreiheit: klare Struktur, saubere Auszeichnung
  

Für mich ist gerade der erste Punkt am wichtigsten, denn man weiß nie, was die Zukunft bringt…

Checkliste: So machst du deine Bilder im Gutenberg barrierefrei

• ALT-Texte direkt im Gutenberg-Block ergänzen
• Aussagekräftige ALT-Texte schreiben, keine Keyword-Auflistung
• Keine redundanten Texte („Bild von einer Frau mit Laptop“, wenn das ohnehin klar ist)
• Tools zur Barrierefreiheitsprüfung nutzen (z. B. Silktide)

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 oder setz einfach mein Snippet ein! Und schreib Inhalte, die nicht nur gut aussehen, sondern auch für alle zugänglich sind, ganz egal, wie sie konsumiert werden.