WordPress Alternativtext mit Gutenberg

von

am

|

geschätzte Lesezeit:

5 Minuten

Disclaimer: Dieser Beitrag ist älter als zwei Jahre. Es könnte also sein, dass auch sein Inhalt in Teilen bereits veraltet ist.

Dies ist kein Hund. Dies ist das Bild von einem Hund. Der WordPress Alternativtext sollte dies so benennen.

Für eine neue WordPress Website sollen die Bilder passend umbenannt und ihnen einen Alternativtext zugeordnet werden. Doch dabei entsteht ein Fehler, der die Urheberin der Bilder betrifft. Das gefällt der natürlich gar nicht. Also macht sie den Betreiber der Website darauf aufmerksam. Woraufhin der den Fehler behebt. Glaubt er zumindest.

Tatsächlich erscheint der Fehler noch immer auf den jeweiligen Seiten. Also fragen sie mich: Was ist hier passiert? Warum funktioniert das nicht? Doch, sage ich, das funktioniert schon ganz gut. Allerdings ist das mit dem WordPress Alternativtext so eine Sache, die man sich genauer anschauen sollte.

Warum ist der WordPress Alternativtext so wichtig?

Der Alternativtext ist eine Beifügung zu einem Bild-Element. Oder um es in HTML-Sprech zu sagen: Der Alternativtext meint das alt-Attribut des img-tags.

So ziemlich jedes Bild, das auf einer Website erscheint, braucht einen solchen alternativen Text. Leider wird dies allzu oft vergessen. Dabei hat so ein Alternativtext gleich mehrere Funktionen. Eine stammt noch aus der Zeit von Tim Berners-Lee, als er das HTML-Protokoll für das damals noch sehr langsame Word Wide Web erfand. Es galt, für Menschen, die Bilder gar nicht angezeigt bekamen, wenigstens eine Beschreibung dessen anzubieten, was sie nicht sehen konnten.

Apropos nicht sehen können. Alternativtexte dienen so vor allem auch dem Zweck, Blinden und Sehbehinderten eine Information über das Bild zu liefern. Im Gegensatz zum Bild an sich können diesen Text Screenreader verstehen und dann entsprechend vorlesen.

Schließlich dienen diese Texte den Suchmaschinen. Sicherlich können die mittlerweile was mit dem Bild an sich anfangen. Dennoch sollte man ihnen durch die Auszeichnung dieses Attributes mitteilen, in welchem Kontext das Bild erscheint. Wer mit Yoast SEO arbeitet, kennt die Aufforderung:

Bilder mit Alt-Attributen: Die Bilder auf dieser Seite haben keine Alt-Attribute, die das Thema deines Textes widerspiegeln. Füge deine Keyphrase oder entsprechende Synonyme zu den Alt-Attributen bei passenden Bildern hinzu! – Yoast SEO

Mit anderen Worten sollte der Alternativtext aus einer Beschreibung des Bildes bestehen, dabei aber auch die Fokus-Keyphrase beinhalten, zu der der Beitrag (oder die Seite) im Text die passenden Informationen liefert.

Wie kann man mit Gutenberg ein Bild mit einem alt-Attribut auszeichnen?

Grundsätzlich gibt es zwei Stellen, an denen man das alt-Attribut vergeben kann: in der Mediathek und in der Bearbeitung von Seiten und Beiträgen. Im Ergebnis sorgen beide Vorgehen dafür, dass das Bild einen Alt-Text hat. Und doch gibt es einen feinen Unterschied.

Bilder über die Mediathek hochladen

Wie Sie den Alt-Text in der Mediathek hinterlegen am Beispiel von dem Bild "Dies ist kein Hund"
Alt-Text in der WordPress Mediathek hinterlegen

Wenn Sie sich angewöhnt haben, Ihre Bilder immer erst einmal über die Mediathek auf den Server hochzuladen, sollten Sie hier auch direkt den Alternativtext hinterlegen.

An dieser Stelle gibt WordPress mittlerweile auch die Information aus, dass Sie den Alternativtext nur für Bilder hinterlegen sollen, wenn diese mehr als nur dekorativ sind. Was das bedeutet, erklärt der bereitgestellte Link zur W3C.

Gehen wir aber mal davon aus, dass das Bild mehr als nur ein hübsches Muster zeigt. Mein Beitragsbild ist zum Beispiel nicht nur das eines Hundes, der mit dem Thema auf den ersten Blick gar nicht so viel zu haben scheint. Es zeigt auch Text, den kein Screenreader lesen kann. Deshalb gehört der auch in den Alternativtext.

Nun können Sie Ihr soeben hochgeladenes Bild über einen Bildblock in einen Beitrag oder auf einer Seite einbinden. Gutenberg wird dann alle Bild-Informationen, die Sie in der Mediathek hinterlegt haben, übernehmen.

Bild beim Erstellen eines Bildblocks hochladen

Sie müssen nicht immer den Weg über die Mediathek gehen, um ein Bild hochzuladen. Dies können Sie auch während der Bearbeitung eines Beitrags oder einer Seite tun. Beim Erstellen eines Bildblocks holen Sie sich das gewünschte Bild dann nicht aus der Mediathek, sondern über Hochladen von Ihrer Festplatte.

WordPress Alternativtext über den Bildblock im Beitrag bearbeiten am Beispiel des Bildes "Dies ist kein Hund"
WordPress Alternativtext über den Bildblock im Beitrag bearbeiten

Auch hier haben Sie die Möglichkeit, über die Bild-Einstellungen einen Alt-Text zu vergeben. Aber hier kommt nun der feine Unterschied:

Alle Angaben, die Sie für das Bild im Rahmen des Bildblocks machen, gelten nur für diesen Block auf dieser Seite/in diesem Beitrag. Sie landen nicht in der Mediathek!

Diese Erkenntnis ist bedeutend. Mit ihr entstehen nämlich Möglichkeiten.

WordPress Gutenberg: Alternativtext für ein Bild je nach Kontext

Ein Beispiel: Sagen wir, Sie haben nicht für jeden Beitrag ein eigenes Bild. Sie wollen Ihre Beiträge aber nicht ohne Bild veröffentlichen. Also haben Sie ein Standard-Bild, das Sie für solche Zwecke bereithalten. Sagen wir, das Bild zeigt Sie an Ihrem Rechner. Vor einer hübschen Fototapete.

Der Alternativtext für dieses Bild würde also benennen: Foto von mir beim Bloggen. Im Hintergrund ein Traumstrand. Das allein hilft aber nicht der Optimierung Ihres Beitrags. In dem geht es nämlich um 10 Tipps zum perfekten Schnorcheln. Und genau das würden Sie nun zu Ihrem Alt-Text für diesen konkreten Bildblock hinzufügen.

Nun schreit das W3C vielleicht auf und sagt: Moment mal, hier handelt es sich doch nur um ein dekoratives Bild, das keinen Informationswert hat. Ja, kann sein. Im Sinne der Optimierung meines Beitrags zum Schnorcheln würde ich dies aber so machen.

Bemerkenswert ist hier vor allem auch:

Nur wegen dieser WordPress Logik ist es überhaupt möglich, einem Standardbild den zum Beitrag passenden Alternativtext zu geben!

Das Problem der WordPress Logik in Hinblick auf den Alternativtext

Die Kehrseite dieser Medaille hat sich in dem eingangs erwähnten Beispiel ergeben. Nach dem Hochladen der Bilder über die Mediathek hat der Betreiber der Website allen Bildern einen Alt-Text gegeben. Dann hat er die Bilder an ihrem jeweiligen Einsatzort ausgetauscht. In dem Zuge hat Gutenberg für die Bildblöcke alle Bild-Informationen, so auch den jeweiligen Alt-Text übernommen.

Dummerweise war dem Betreiber bei der Vergabe der Alt-Texte in der Mediathek ein Fehler unterlaufen. Er wollte dort immer auch die Urheberin und ihre Webadresse benennen und hat sich dabei vertan. Und zwar konsequent bei jedem Bild.

Nachdem der Urheberin dies aufgefallen war, hat er den Fehler nur in der Mediathek behoben. Nicht aber auch an dem jeweiligen Einsatzort. Deshalb erschienen auf den jeweiligen Seiten noch immer die alten fehlerhaften Alternativtexte.

Die wesentliche Erkenntnis lautet also:

Gutenberg übernimmt die Änderung der Bild-Informationen in der Mediathek nicht automatisch für die Bildblöcke!

Mit anderen Worten: In einem solchen Fall ist es nötig, über Ersetzen das Bild noch einmal in den Bildblock neu zu laden. Erst dann übernimmt Gutenberg die in der Mediathek gemachte Änderung.

Alternativ kann man aber natürlich auch den Alternativtext über die Bearbeitung des betroffenen Blocks anpassen.


Beitragsbild: Britta Kretschmer

Schreibe einen Kommentar

Die im Rahmen der Kommentare angegebenen Daten werden von mir dauerhaft gespeichert. Cookies speichere ich nicht. Für weitere Informationen siehe bitte meine Datenschutzerklärung.

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert