Leute, wir müssen mal wieder über ALT-Texte reden! Das letzte Mal, dass ich Dich im Rahmen dieser Publikationsreihe damit behelligt hab, ist schon wieder viel zu lange her: "The Art of the ALT Attribute" ist bereits in Ausgabe 109 erschienen! Okay, das Team hat sich zwischenzeitlich auch damit befasst, zum Beispiel Johan in Ausgabe 128 und Sandra in Ausgabe 158.
Aber da mir noch immer so viele schlechte oder fehlende ALT-Texte begegnen, dachte ich, es ist mal wieder Zeit für eine kleine Auffrischung.
Während der Newsletter-Beitrag aus Ausgabe 109 grundsätzlich noch immer aktuell ist, kommt hier nur eine kleine Ergänzung um ein paar weitere Aspekte.
Entscheidungsbaum für alt
Die Web Accessibility Initiative, kurz WAI, hat (schon vor einer Weile, aber das tut der Sache keinen Abbruch) einen alt Decision Tree gebastelt.
Der sieht zugegebenermaßen mehr aus wie eine Tabelle, wie Du hier nachschauen kannst. Nichts desto trotz listet er sehr hilfreich auf, was Du beachten solltest, wenn Du einen ALT-Text verfasst. Je nachdem, was auf dem Bild zu sehen ist, sollte der Fokus in Deiner Beschreibung ein anderer sein. Manchmal solltest Du sogar eher auf den Text verzichten!
Aber: Genug bla bla, ich habe aus dem Tabellen-Baum einen Bild-Baum... naja... zumindest etwas, das mehr nach Entscheidungsdiagramm aussieht, gebaut. Zum Ausdrucken und Einrahmen, in Präsentationen oder Mails einbauen, oder wie auch immer Du es verwenden magst.
Zum ALT-Entscheidungsbaum-Slide
Hier haben wir auch direkt ein tip top Beispiel: Weil die in der Grafik enthaltenen Informationen zu komplex sind, gibt es keinen (ausführlichen) ALT-Text dazu. Gemäß des Entscheidungsbaums sollten alle Informationen im Text eingebunden werden. Da das 1. den Rahmen dieses Newsletters sprengen würden und 2. die lieben Menschen von der WAI das ja bereits textlich aufbereitet haben, verweise ich im ALT-Text daher einfach auf die ursprüngliche Quelle.
Wenn Du anstatt der Tabelle von der WAI oder meiner grafischen Aufbereitung doch lieber eine Liste bevorzugst, dann schau einfach mal hier.
alt bei Bluesky
In meinem Beitrag von letztem Jahr habe ich bereits beschrieben, wie Du ALT-Texte in Deinen Beiträgen in diversen Social Media Plattformen nutzen kannst.
Da lege ich nun eben noch eine Beschreibung für Bluesky nach: Du kannst dort in den Einstellungen Deines Accounts einfach unter dem Punkt "Accessibility" den Regler nach rechts schieben. Durch diese Aktivierung wirst Du in der App daran erinnert, einen ALT-Text zu hinterlegen, wenn Du ein Bild posten möchtest.
Diese Erinnerung sieht so aus:
Wenn man auf das kleine schwarze ALT-Label in der linken oberen Ecke des Bildes klickt, welches im Post eingebunden werden soll, gelangt man in eine neue Maske, in der es ein Eingabefeld für den ALT-Text gibt.
Hast Du diesen ergänzt, musst Du nur noch speichern und das war's.
Randnotiz, falls Du Dich nun verwundert fragst, was denn dieses Bluesky ist: Nachdem Twitter seit dem Verkauf an Elon Musk aus meiner Sicht leider immer unbrauchbarer wird, haben einige Nutzer*innen von dort nun bei Bluesky ein neues Zuhause gefunden. (Ich auch.)
ALT-Attribut vs ALT-Text
Ich habe lange Zeit die Bezeichnungen "ALT-Attribut" und "ALT-Text" mehr oder weniger synonym verwendet und stelle immer wieder fest, dass das ein durchaus verbreiteter Trend ist. Trotzdem ist es falsch, deswegen an der Stelle nochmal ein kleiner Exkurs, damit wir es in Zukunft alle richtig machen:
Bei The A11Y Project lernen wir hier unter der Überschrift "1\. Some images should use an empty alt attribute" den Unterschied:
"An alt attribute is HTML syntax, and
Alt text is the description enclosed between the alt attribute's quotes.
All images need an alt attribute, but not all images need alt text.
These are two different things, so do not mix them up."
Dieses ALT-Attribut mit befülltem ALT-Text ist also zulässig, sofern es sich um ein informatives oder mit einer Aktivität verknüpftes Bild handelt:
<img src=\"domain.com/content/image.svg\" alt=\"Eine wunderschöne Beschreibung des Bildinhalts\">
Ebenfalls in Ordnung ist diese Variante eines ALT-Attributs mit leerem ALT-Text im Fall eines dekorativen Bildes, welches wir für Nutzer*innen nicht weiter beschreiben müssen:
<img src=\"domain.com/content/image.svg\" alt=\"\">
Wie ich bei WAI gelernt habe, kann man dazu auch "null text alternative" sagen und klingt dabei, als ob man wirklich sehr viel Ahnung hat.
Unabhängig davon, um welche Art Bild es sich handelt, ist diese Variante mit einem einsamen ALT-Attribut ganz ohne ALT-Text nicht zulässig:
<img src=\"domain.com/content/image.svg\">
Hall of Fame
Wenn Du jetzt immer noch kein ALT-Text Ultra bist oder Du nicht genug bekommen kannst von dem Thema, dann schau mal bei der Alt Text Hall of Fame vorbei. Diese ist eine super Ergänzung zu meinem Beitrag und erklärt beispielsweise noch für ein paar weitere Plattformen, wie Du ALT-Texte einbinden kannst. (Zum Beispiel bei Mastodon, was neben Bluesky eine andere große Anlaufstelle für alle ist, die sich bei Twitter nicht mehr so ganz wohl fühlen.) Außerdem gibt es Beispiele und Tipps.
Zum Abschluss, wie soll es auch anders sein, nochmal der Verweis auf meine 2 Lieblings-Quellen "Alt-texts: The Ultimate Guide" & "Writing great alt text: Emotion matters".
Also: Fröhliches ALT-Texten und bis zum nächsten Mal!