Orientierungshilfe für die ALT-Texterei

Das Thema ALT-Texte erfährt weiterhin einen Zuwachs an Sichtbarkeit. Zumindest soweit ich das in meinem Umfeld bewerten kann. Mittlerweile ist es kein Thema mehr, mit dem sich nur Menschen auseinandersetzen, weil sie sich ALT-Texte für die eigene Barrierefreiheit oder wegen SEO wünschen.

Folgende Visualisierung zum Verfassen von ALT-Texten finde ich sehr gelungen:

(Quelle)

Klar wird das nicht bei 100% aller Bilder 1:1 passen, aber in vielen Fällen ist es hilfreich – gerade, wenn man sich noch schwer mit dem Formulieren von ALT-Texten tut.

Der zugehörige Beitrag "How to Write Alt Text and Image Descriptions for the visually impaired" von Veronica Lewis liefert umfassende Infos. Einige davon habe ich für Dich herausgezogen, aber der Artikel an sich ist durchaus eine Lektüre wert.

Laut Veronica haben weniger als 1% der Bilder, die es online gibt, einen ALT-Text. Ganz schön heftig. Stell Dir das mal vor, wenn 99 von 100 Bildern, die Dir online begegnen, für Dich nicht erkennbar wären. Wie viele Informationen alleine dadurch schon verloren gehen! Dazu kommt, dass bei einigen der existierenden ALT-Texte noch Luft nach oben ist, um sie wirklich hilfreich zu gestalten.

Veronica beschäftigt sich übrigens nicht nur mit den ALT-Texten, sondern hat als weitere Spielart der Barrierefreiheit die Bildbeschreibung mit aufgenommen. Während der ALT-Text in der Regel (mit Ausnahmen) im Quellcode steht und von Screenreadern verarbeitet wird, kann die Bildbeschreibung sichtbar für alle auf verschiedenen Arten eingebunden werden:

"Image descriptions may be in the image caption, in a text post, or shared in a text link for extended descriptions."

Das ist ein richtig guter Reminder, dass eben auch der umgebende Text von Relevanz ist. Nicht nur im Sinne der Barrierefreiheit, sondern auch hinsichtlich SEO.

Eine auf den ersten Blick interessante Lösung, die ich beispielsweise bei Bluesky entdeckt habe: Den ALT-Text nicht nur für die Screenreader und im Fall nicht ladbarer Ressourcen nutzen, sondern gleichzeitig auch als Bildbeschreibung anzeigen.

Konkret sieht die Integration so aus:

• Im Post (Tweet? Skeet?) ist anhand des kleinen "ALT" Labels kenntlich gemacht, dass es zu diesem Bild einen ALT-Text gibt.

• Klickt man ein Bild an, gelangt man zu einer größeren Ansicht der Ressource und am unteren Bildschirmrand ist der ALT-Text als Bildbeschreibung zu sehen.

Zunächst einmal wirkt das auch für Menschen, die keine Sehbeeinträchtigung haben, durchaus hilfreich: Durch die Beschreibungen im Post von Jasmin beispielsweise werden zumindest mir ein paar Details bewusster, die ich beim Betrachten der Bilder gar nicht so sehr wahrgenommen habe.

Zudem passiert es mir immer wieder, dass ich bei Bebilderungen nicht immer genau verstehe, was die Aussage ist – auch hier können Bildbeschreibungen Abhilfe schaffen. Allerdings ist die Lösung, beide Elemente aufwandsarm in Personalunion miteinander zu verbinden, leider nicht im Sinne von Barrierefreiheit und Inklusion: Wer einen Screenreader nutzt, bekommt nun zweimal den gleichen Text vorgelesen, ohne zusätzlichen Erkenntnisgewinn durch eine Bildbeschreibung, die ausführlicher ist als der ALT-Text.

Veronica thematisiert in ihrem Artikel die Möglichkeit, ALT-Texte und Bildbeschreibungen automatisiert mit Hilfe von KI zu erstellen. Ihre Erfahrungen hinsichtlich der Qualität sind jedoch gemischt. Wir haben da aber mittlerweile einen recht erfolgreichen Ansatz entwickelt – vielleicht ja auch mal ein schönes Thema für den Newsletter 😊

Ergänzend zu der eingangs präsentierten Grafik empfiehlt Veronika übrigens, die Art des Bildes zu spezifizieren:

"Am I looking at a cartoon? A bar chart? A photo?"

Wenn Du, so wie ich, ein Bild einbindest, das Du woanders gefunden hast: Es lohnt sich, die Quelle zu prüfen, denn mit Glück findest Du hier einen ALT-Text, den Du übernehmen oder als Grundlage nutzen kannst!

Oft ist es auch sinnvoll, einen Link zu Quellen einzubinden – aber bitte nur in der Bildbeschreibung und nicht im ALT-Text, denn hier kann nicht geklickt werden!

"For charts, graphs, and data visualizations, as well as screenshots of web articles, it is helpful to share a link to the original data, a transcript of text, or a link to the original content so that readers can get further information."

Zudem gibt es auch Ausnahmen, in denen der ALT-Text leer bleiben darf oder - noch besser, so Veronica – mit einem "null" versehen wird.

Dazu passt auch der ALT-Entscheidungsbaum aus Ausgabe 174 in meinem Beitrag "ALT-Auffrischung":

Zum ALT-Entscheidungsbaum-Slide

Eine kleine Zusammenfassung der Erkenntnisse:

1. ALT-Texte sind wichtig für die Barrierefreiheit.

2. Eine gute Bildbeschreibung ist für alle hilfreich, egal ob und welche Hilfsmittel zum Einsatz kommen.

3. Wer wirklich barrierefrei und inklusiv handeln möchte, gibt sich dabei die Mühe, die Bildbeschreibung separat zu texten – gerne auf Basis des ALT-Texts, aber keine reine Kopie.

4. Die Art des Bildes im ALT-Text zu spezifizieren kann nützlich sein.

5. Bei Übernahme von Bildern auf bereits vorhandene ALT-Texte zurückgreifen.

6. Auf Quellen und weiterführende Infos verweisen, allerdings keine Links in ALT-Texten unterbringen.

7. ALT-Texte dürfen in bestimmten Fällen auch leer sein und können dann einen Platzhalter bekommen, damit Nutzer*innen von Screenreadern so erfahren: Hier wurde nichts vergessen, sondern absichtlich kein ALT-Text verfasst.

In Veronicas Artikel findest Du außerdem einen Haufen hilfreicher Hinweise auf weiterführende Beiträge.

Weil mir immer wieder nicht so hilfreiche ALT-Texte begegnen, überlege ich, eine kleine Sammlung zu erstellen. Best und Worst Practices sind ja oft ziemlich gut darin, einem deutlich vor Augen zu führen, worauf es ankommt. Hast Du Beispiele für besonders gelungene oder besonders schlechte ALT-Texte? Dann her damit!