Eine Einführung zu Alt-Texten in WordPress mit dem Fokus auf den Block-Editor.
Was ist ein Alt-Text
Alt-Text steht für „Alternativer Text”. Dieser dient als Alternative für ein Bild, falls dieses nicht wahrgenommen oder dargestellt werden kann – zum Beispiel wenn jemand blind ist oder das Bild nicht geladen werden kann.
Daraus ergibt sich, dass der Alt-Text das Bild selbst beschreiben soll, also was darauf abgebildet ist. Wie du gute Alt-Texte schreibst, kannst du in meinem Blog-Beitrag „So kannst du gute Alt-Texte schreiben” nachlesen.
Dekorative Bilder
Rein dekorative Bilder, zum Beispiel Hintergrundbilder oder grafische Layout-Elemente, sollten für blinde Nutzende ausgeblendet werden.
Dies erreichst du am Besten über einen leeren Alt-Text. Dabei gibt es einen wichtigen Unterschied zwischen einem fehlenden Alt-Text und einem leeren Alt-Text:
/*fehlender Alt-Text*/
<img>
/*leerer Alt-Text*/
<img alt=" "> Bei einem Bild mit fehlendem Alt-Text wird der Titel des Bildes (der Dateiname) vorgelesen, was problematisch ist, da dies keine Aussage über den Inhalt des Bildes gibt.
Anders verhält es sich bei einem leeren Alt-Text. Dieser signalisiert, dass bewusst entschieden wurde, das Bild für Screen-Reader-Nutzende auszublenden.
Man sollte jedoch nicht pauschal alle Bilder, die eine Stimmung transportieren oder einen visuellen Mehrwert haben, als dekorativ definieren. Auch eine Stimmung kann über einen beschreibenden Alt-Text für Screen-Reader-Nutzende vermittelt werden.
Zudem dienen Bilder auch als Orientierung, wenn man beispielsweise sagt „der Button unter dem Bild mit dem Wald”. Wenn das Bild ausgeblendet wird, ist diese Orientierung nicht mehr möglich.
Alt-Texte in WordPress
Alt-Texte können in WordPress an verschiedenen Stellen gesetzt werden. Der beste Weg ist es, den Alt-Text über die Mediathek zu setzen.
Alt-Text über die Mediathek
Gehe dafür zur Mediathek, wähle ein Bild aus und schreibe einen Alt-Text.
Wenn du dann das Bild über den Block-Editor einfügst, wird der Alt-Text übernommen.
Alt-Text über den Block-Editor
Du kannst auch den Alt-Text im Block-Editor setzen. Dazu fügst du den Bild-Block hinzu, lädst ein Bild von deinem Computer hoch und schreibst einen Alt-Text.
Der Nachteil an diesem Weg ist, dass der Alt-Text nicht mit der Mediathek synchronisiert wird und du ihn daher immer wieder neu formulieren musst.
Möchtest du das Bild auch an anderer Stelle verwenden, kannst du den Alt-Text kopieren und ihn in die Mediathek einfügen.
Der Grund, dass die Alt-Texte aus dem Block-Editor nicht mit der Mediathek synchronisiert werden, liegt daran, dass der Alt-Text kontextabhängig sein kann. Daher kann ein übernommener Alt-Text aus der Mediathek in einem einzelnen Beitrag oder einer Seite verändert werden, ohne die Alt-Texte des Bildes in der Mediathel oder an anderer Stelle zu beeinflussen.
Leere Alt-Texte in WordPress
Um ein dekoratives Bild zu definieren, lasse das Feld für den Alt-Text frei. Damit setzt WordPress automatisch einen leeren Alt-Text. So gibt es kein fehlendes Alt-Attribut mehr. Dies ist für die Benutzerfreundlichkeit für Screen-Reader-Nutzende deutlich besser, jedoch entsteht dadurch auch die Verantwortung, wichtige Bilder mit einem passenden Alt-Text zu versehen.
Die gesetzten leeren Alt-Texte gelten für den Block-Editor. Ob dies auch für Page-Builder gilt, kann ich nicht sagen. Da ich die meisten Page-Builder für nicht barrierefrei halte, habe ich es nicht getestet. Dies solltest du am Besten überprüfen, wenn du einen Page-Builder verwendest.
SEO und Alt-Texte
Viele SEO-Plugins empfehlen, Keywords gezielt in Alt-Texte zu setzen, um das Ranking zu verbessern. Aus Sicht der Barrierefreiheit ist das jedoch problematisch. Alt-Texte sind in erster Linie dafür da, Menschen mit Sehbehinderungen den Bildinhalt zu vermitteln – nicht, um Suchmaschinen zu optimieren. Wenn der Alt-Text nur als Keyword-Schleuder dient, leidet die Verständlichkeit und der eigentliche Zweck geht verloren.
Ein guter Alt-Text beschreibt das Bild präzise und knapp, so wie es jemand wahrnehmen würde, der es sehen kann. Er liefert keine unnötigen Zusatzinformationen und schon gar keine eingefügten Schlagworte, die inhaltlich nichts mit dem Bild zu tun haben. Wer hier auf SEO-Tricks statt auf klare Beschreibung setzt, schließt Nutzer*innen aus – und das ist weder barrierefrei noch inklusiv, selbst wenn SEO Plugins etwas anderes empfehlen.
Barrierefreiheit in WordPress umsetzen – eine Blog-Reihe
In regelmäßigen Abständen veröffentliche ich Beiträge, wie man Barrierefreiheit in WordPress umsetzen kann.
Du kannst dir gerne Themen wünschen, die ich behandeln soll. Kommentiere dazu einfach den Beitrag.
