Wie schreibe ich nützliche Alt-Texte?
Die neue Webseite ist erstellt, Texte und Bilder abgefüllt, jetzt noch kurz die Alt-Texte. Du tippst ein paar beschreibende Worte ins leere Feld und schnell weiter im Text. Aber Halt, Stopp. Ist den Menschen, für die solche Alt-Texte da sind, damit tatsächlich geholfen? Und wie müssen Alt-Texte geschrieben sein, damit sie wirklich barrierefrei sind?
Key Takeaways
- Ein guter Alt-Text beschreibt die Aussage (nicht nur das Aussehen) des Bildes.
- Formuliere Alt-Texte prägnant in einem Satz und im gleichen Ton wie der restliche Text.
- Nicht jedes Bild braucht einen Alt-Text. Das Alt-Attribut kann bei dekorativen Bildern beispielsweise bewusst leer gelassen werden.
- KI-Integrationen können Alt-Texten vorschlagen, um der Redaktion Aufwand zu sparen. Diese Textvorschläge sollten aber immer auf Kontext und Aussage geprüft werden.
- Neben dem Alt-Text gibt es noch weitere Textalternativen wie Bildlegenden oder Aria-Labels.
Alt-Texte machen Bilder zugänglich
Ein Alt-Text ist die Textbeschreibung eines Bildes, die ein Screenreader auf einer Website, in einem PDF oder einem Social Media Post anstelle des Bildes vorliest. Die meisten User:innen sehen diese Textbeschreibung nie. Für Menschen, die einen Screenreader nutzen, sind sie aber ein zentrales Element, um den Content lückenlos zu verstehen.
Aber auch User:innen mit einer langsamen Internetverbindung profitieren von Alt-Texten und können eine Bildaussage im Alt-Text lesen, wenn das Bild einfach nicht laden will. Sogar Suchmaschinen nutzen Alt-Texte. Denn sie erklären in Reintext, was im Bild passiert. Und Suchmaschinen lieben Reintext. Sind sie mit Alt-Texten versehen, werden deine Bilder und damit auch deine Webseite bei Google, ChatGPT und Co. besser auffindbar.
Ein guter Alt-Text gehört also gewissermassen zur sauberen Publikationsarbeit, genauso wie eine aussagekräftige Überschrift oder ein funktionierender Link.
Kann eine KI meine Alt-Texte schreiben?
Alt-Texte zu jedem Bild zu formulieren kann eine mühselige Arbeit sein. Besonders bei einem Medium wie einem Webshop, wo viele Bilder integriert sind. Da liegt die Frage natürlich nahe, ob nicht eine KI-Integration einem diese Arbeit abnehmen kann.
Und tatsächlich bieten viele CMS und Tools das heute an. Verfügbare KI-Integrationen generieren Alt-Texte automatisch beim Bild-Upload im Backend. Die KI liest dabei das Bild visuell aus und formuliert dazu eine passende visuelle Beschreibung. Das ist in den meisten Fällen zwar besser als nichts. Aber wirklich nützlich sind solche Alt-Texte für Enduser:innen mit Screenreadern trotzdem nicht.
Warum? Weil die KI lediglich das Visuelle des Bildes berücksichtigt. Die Aussage des Bildes aber ergibt sich häufig erst durch den Seitenkontext. Und dieser fehlt den meisten KI-Integrationen beim Formulieren ihrer Alt-Texte.
Ein Beispiel, um zu veranschaulichen, was wir meinen:
Die KI schreibt als Alt-Text:
«Frau arbeitet am Laptop».
Jemand aus dem Redaktionsteam überarbeitet und weiss, dass es auf der Seite um die Onlineeingabe eines Gesuchs geht. Der Redakteur schreibt darum den Alt-Text neu:
«Indem du dein Gesuch online übermittelst, kannst du es jederzeit und überall eingeben».
Eine KI-Integration kann sich für eine erste Fassung des Alt-Textes lohnen, um Zeit zu sparen. Gerade, wenn du viele Bilder abfüllen musst. Den generierten Text solltest du aber immer als Entwurf betrachten. Überarbeite ihn im Rahmen des Seitenkontextes, damit die Alt-Texte wirklich gut werden.
Und so schreibst du nützliche Alt-Texte
Damit deine in Alt-Texte investierte Zeit sich am Ende auch wirklich auszahlt, orientiere dich beim Überarbeiten oder Ausformulieren an diesen Prinzipien:
1. Aussage statt Aussehen
Beschreibe, was das Bild sagen will. Also die Kernaussage oder auch mal eine Stimmung, die das Bild vermitteln will.
2. Halte dich wie immer im Web kurz
Oder noch kürzer. Meist reicht ein Satz.
3. Nicht mit «Bild von …» oder «Grafik …» beginnen
Der Screenreader sagt die Bildart oft selbst an. Nenne die Bildart also nur, wenn es sie braucht, um die Aussage zu verstehen.
4. Keine Wiederholungen
Steht die Aussage, die du im Alt-Text schreiben möchtest, schon in der Bildlegende oder im Linktext? Dann lasse den Alt-Text weg.
5. Mit einem Punkt abschliessen
Das Satzzeichen sorgt beim Vorlesen für eine Pause und dafür, dass der Screenreader richtig betont. Fehlt das Satzzeichen, verschmilzt der Alt-Text beim Vorlesen mit dem nachfolgenden Text.
6. Im gleichen Ton bleiben
Schreib den Alt-Text stilistisch so, wie du auch den restlichen Text und die Bildlegenden schreibst. Sonst fällt der Alt-Text beim Vorlesen aus dem Rahmen.
7. Bei Details abwägen
Nenne Details oder das Aussehen von Personen nur, wenn sie inhaltlich zur Aussage beitragen. Frage dich darum: Spielen Alter, Geschlecht oder Herkunft bei Personen für deine Aussage eine Rolle? Wenn nicht, lasse diese Details im Alt-Text weg.
8. Abkürzungen ausschreiben
Daten, Zeiten und Abkürzungen machen Screenreadern meist Mühe. Schreibe darum besser aus, zum Beispiel «29. Mai bis 1. Juni» statt «29. Mai – 1. Juni».
Okay, und wie sieht das konkret aus? Hier ein paar Beispiele:
Auch ein Label ist ein informatives Bild und muss Alt-Text aufweisen. Ganz besonders, wenn die Aktion nirgendwo sonst ausgeschrieben steht (in diesem Fall würden bestimmte Personengruppen vom Angebot sogar ausgeschlossen). Übernimm den Labeltext in den Alt-Text oder spiel das Label als HMTL-Text aus.
Was, wenn eine Grafik sehr komplex ist?
Bei Datenvisualisierungen und Infografiken reicht ein Alt-Text allein meist nicht aus. Zu viel Information steckt im Bild. Kombiniere in solchen Fällen diese 5 Ebenen:
- Fliesstext vor dem Bild: Führe die Grafik im Fliesstext ein und beschreibe den Aufbau, zum Beispiel x- und y-Achse und die Beschriftung eines Diagramms.
- Bildtitel: Setze einen aussagekräftigen Bildtitel. Der Screenreader liest diesen vor und setzt den thematischen Rahmen.
- Alt-Text: Nutze ihn für relevante Infos, die im Bild stehen, aber noch nicht im Text drumherum vorkommen. (Dieser Textteil ist nur für Screenreader sichtbar oder wenn das Bild aus anderen Gründen nicht angezeigt werden kann.)
- Bildlegende: Erkläre in 1-2 Sätzen, wie die Daten des Diagramms mit der Aussage in Zusammenhang stehen. (Die Bildlegende ist für alle sichtbar.)
- Fliesstext nach dem Bild: Fasse die Daten nochmal kurz zusammen und leite in den nachfolgenden Text über.
Andere Möglichkeiten sind, ausführliche Alt-Texte in Form eines Dropdowns oder einer Tabelle verfügbar zu machen. Ob und wie das funktioniert, ist allerdings abhängig vom Medium. Wir klären deine Optionen gerne mit dir.
Eine Textalternative muss nicht zwingend der Alt-Text sein
Der Alt-Text ist mit Abstand das bekannteste Werkzeug, um Bildinhalte barrierefrei zu machen. Doch er ist bei weitem nicht das einzige. Je nach Situation können auch andere Textalternativen wie Bildlegenden oder der Fliesstext eingesetzt werden. Darüber hinaus gibt es:
- Aria-Labels: Ein technisch hinterlegter Hinweis, der einem Screenreader erklärt, was ein bestimmtes Element tut. Geeignet, um zum Beispiel verlinkte Icons barrierefrei zu machen.
- Transkript: Das Transkript ist die Textform von Sprache aus einem Audio oder Video. Transkripts können in unterschiedlicher Form integriert werden, zum Beispiel als PDF auf einer Seite verlinkt.
- Untertitel: Untertitel sind weit verbreitet, da sie auch Menschen dienen, die zum Beispiel ihre Kopfhörer vergessen haben oder auf Social Media keinen Ton einschalten wollen. Untertitel sind in Echtzeit übersetzte Sprache in Textform. Diese sind meist ins Video integriert oder darübergelegt.
- Audiodescription: Bei einer Audiodescription beschreibt eine Stimme visuelle Elemente. Diese zusätzliche Tonspur läuft direkt im Video integriert und dient Menschen mit eingeschränkter Sicht zum Beispiel beim Filme schauen.
- Gebärdensprache: Bei Videos kann auch ein zusätzliches Fenster integriert werden, in dem mittels Gebärdensprache eine Simultanübersetzung stattfindet.
Wie würdest du das Bild am Telefon beschreiben?
Wir sind Fan von praktischen Lösungen. Darum folgender Praxistipp für dich, der sich für uns bewährt hat: Wenn du dir unsicher bist, wie du deinen Alt-Text formulieren willst, frage dich:
Wie würde ich das Bild am Telefon beschreiben?
Auf diesem Weg lässt du automatisch die Details weg und fokussierst stattdessen auf das, worauf es ankommt. Wie bei guten Alt-Texten eben.
FAQ
Kann ich Alt-Texte mit KI generieren?
Ja, und für eine erste Fassung spart das Zeit, gerade bei vielen Bildern. KI beschreibt aber vor allem das Sichtbare; der Kontext zur restlichen Seite und damit die eigentliche Bildaussage fehlt ihr oft. Wenn du generierte Alt-Texte einsetzen willst, sieh sie darum als Entwurf an, den du mit Blick auf den Seitenkontext nochmal prüfst und gegebenenfalls überarbeitest.
Was passiert, wenn ich einen Alt-Text vergessen habe?
Screenreader lesen dann oft den Dateinamen vor («Bildname.jpg») oder überspringen das Bild kommentarlos. Die Bildinformation geht dann für Personen, die Screenreader einsetzen, verloren. Ein bewusst leergelassenes Alt-Attribut signalisiert dem Screenreader, dass er kommentarlos überspringen kann. Dann wird auch kein Dateiname vorgelesen.
Sind Emojis barrierefrei?
Screenreader lesen Emoji vor, zum Beispiel «lachendes Gesicht mit Freudentränen». Wenn im Text aber viele Emojis verwendet werden, stört das den Lesefluss. Hier ein paar Grundsätze für den barrierefreien Einsatz von Emojis:
- Setze Emojis gezielt und sparsam ein.
- Ersetze Wörter nie mit Emojis. Nutze die Emojis nur als Ergänzung.
- Drücke ein Gefühl nie nur über ein Emoji aus, sondern schreibe es zusätzlich aus.
- Nutze bekannte und unmissverständliche Emojis, die alle verstehen.
- Setze Emojis am Ende eines Satzes.
- Vermeide Emojis, die im hellen oder dunklen Modus schlecht sichtbar sind.