Ob Infografik, Illustration oder Fotogalerie: Die meisten Bildinhalte im Web sind mehr als hübsche Deko. Damit ihre Funktion auch für Menschen mit Seheinschränkungen nicht verloren geht, benötigen sie Alternativtexte. Unser frisch herausgeputzter Leitfaden mit Expert:innen-Infos und erhellenden Grafiken von Gehirngerecht Digital.
Was sind Alt-Texte und warum braucht es sie?
Alt-Texte sind Beschreibungen, die den Inhalt eines Bildes zusammenfassen. Sie dienen als Alternative für Menschen, die Bilder nicht oder nur eingeschränkt sehen können.
Textalternativen werden oft unterschätzt, spielen aber eine große Rolle, um wichtige Inhalte, aber auch die Stimmung eines Blogeintrags oder einer Seite wiederzugeben oder die Ausdrucksweise der ganzen Marke zu vermitteln. Neben wichtigen Informationen tragen Textalternativen also viel dazu bei, Emotionen zu erzeugen und eine positive Assoziation mit euren Inhalten zu schaffen.
Die Bereitstellung von Alt-Texten für Bilder ist Bestandteil von Landes- und Bundesgesetzen und in vielen Fällen verpflichtend. Für Bundesbehörden und -institutionen gilt das Behindertengleichstellungsgesetz (BGG), für die Privatwirtschaft das Barrierefreiheitsstärkungsgesetz (BFSG) und viele Berliner Kulturinstitutionen müssen sich an die Vorgaben aus dem Barrierefreie Informations- und Kommunikationstechnik Gesetz Berlin halten.
Neben der Barrierefreiheit haben Alt-Texte aber auch einen positiven Einfluss auf die Suchmaschinenoptimierung (SEO). Suchmaschinen mögen die zusätzlichen Informationen und nutzen sie, um Bildinhalt besser zu verstehen und sie gezielter in den Suchergebnissen zu zeigen.
Bilder mit Alt-Texten versehen
Es gibt mehrere Wege, um Bildern eine Textalternative zur Seite zu stellen. Für euch werden die zwei folgenden am wichtigsten sein:
Textalternative neben dem Bild: Der Text wird in dem Fall einfach neben das Bild geschrieben.
Text „im Bild”: Die zweite Variante sind eigentlich die echten Alt-Texte. Dabei wird ein Text einem Bild zugewiesen. Dieser Text erscheint dann nicht visuell auf der Website, sondern ist im Bild hinterlegt. Dieser Text kann von Screenreader-User:innen ausgelesen werden. Der Text wird auch dann sichtbar, wenn das Bild nicht geladen werden kann – zum Beispiel bei einer langsamen Internetverbindung. In eurem Content-Management-System (CMS) könnt ihr beim Hochladen der Datei in die Mediathek einen Alt-Text hinterlegen.
Tipp
Testen, wie die eigene Seite mit dem Screenreader klingt:
Los geht’s: So formuliert ihr einen verständlichen Alt-Text
Passende Alt-Texte zu schreiben, ist keine Raketenwissenschaft. Ein paar Stolperfallen gibt es aber. Damit ihr diese elegant umgeht, haben wir folgende Tipps aus der Praxis für euch.
Haltet euch an die Kernaussage
Ein guter Alt-Text vermittelt alle wichtigen Informationen des Bildes. Es geht nicht darum, jedes Detail zu beschreiben, sondern sich auf die Kernaussage des Bildes zu konzentrieren.
Wichtig ist, dass der Alt-Text keine zusätzlichen Informationen enthält, die nicht auch im Text genannt werden. Zum Beispiel: Wenn ihr in einem Artikel über erfolgreiche Frauen ein Bild von Taylor Swift verwendet, sollte im Alt-Text nur „Taylor Swift“ stehen, wenn ihr Name auch im Artikel erwähnt wird. Andernfalls würdet ihr einigen Leser:innen Informationen geben, die andere nicht haben.
Formuliert euren Alt-Text also so, dass er nur das beschreibt, was tatsächlich auf dem Bild zu sehen ist oder was aus dem Begleittext klar wird. Namentliche Nennungen gehören besser in den Fließtext.
Fasst euch kurz
Die Beschreibung sollte präzise sein, relevante Inhalte nennen und Redundanzen mit dem umgebenden Text vermeiden. Dabei gilt der Grundsatz: „So knapp wie möglich, so ausführlich wie nötig.“
Laut der Überwachungsstelle des Bundes für Barrierefreiheit von Informationstechnik sollte ein Alt-Text maximal 80–100 Zeichen lang sein. Sie sagen aber auch selbst, dass das bei komplexen Bildern nicht immer möglich ist. Es ist also wichtiger, das Bild verständlich zu beschreiben, als sich streng an die Zeichenbegrenzung zu halten.
Schreibt, wie ihr es mündlich beschreiben würdet
Achtet darauf, den Alt-Text in flüssiger und natürlicher Sprache zu schreiben. Es sollten also keine Keywords aneinandergereiht werden. Auch die richtige Grammatik spielt eine Rolle: Ein Punkt am Ende des Satzes ist hilfreich, er sorgt für eine kleine Pause bei der Sprachausgabe durch Screenreader.
Auf einführende Worte wie „Ein Bild von …“ oder „Auf diesem Bild …“ solltet ihr verzichten. Die Ausgabe eines Screenreaders liest automatisch vor, dass es sich um ein Bild handelt, diese Information wäre also nur eine unnötige Dopplung.
Vermittelt auch die Stimmung
Vermittelt das Bild eine bestimmte Atmosphäre, Emotion oder Stimmung? Dann ist auch dies für die Bildbeschreibung relevant und die Wirkung sollte im Alt-Text beschrieben werden.
Emojis, Links oder Anführungszeichen gehören nicht in den Alt-Text
Alt-Texte bestehen aus reinem, einfachem Text und können keine speziellen Formatierungen oder Inhalte wie Emojis oder Links verarbeiten. Solche Elemente würden nicht korrekt übermittelt und könnten für Nutzer:innen verwirrend sein.
Anführungszeichen solltet ihr ebenfalls vermeiden, denn sie werden im Code genutzt, um den Anfang und das Ende des Alt-Texts zu markieren. Wenn ihr im Alt-Text Anführungszeichen einfügt, kann das dazu führen, dass der Text vorzeitig endet und wichtige Informationen verloren gehen.
Beispiele für Alt-Texte
Welchen Inhalt ein Alt-Text haben sollte, hängt vom Kontext ab, in dem das zugehörige Bild verwendet wird. Betrachten wir zum Beispiel das Bild eines Mädchens auf einem Spielplatz in unterschiedlichen Kontexten.
Verwendung in einem Artikel, der über den Spielplatz berichtet: “Ein Mädchen in Kapuzenpullover steht strahlend auf unserem inklusiven Spielplatz.”
Verwendung in einem Artikel über die Person auf dem Foto: “Sarah steht in einem Kapuzenpullover auf einem Spielplatz. Sie trägt ihr hellbraunes Haar zu einem Zopf gebunden und lächelt strahlend.”
In beiden Kontexten ist die Person relevant, in einem Artikel über die Person würde man aber sehr viel detaillierter auf die visuellen Merkmale des Mädchens eingehen.
Im Weiteren geben wir euch noch mehr Beispiele für gute (und schlechte) Alt-Texte.
Beispiel: Hundewelpen
- Schlechter Alt-Text (Aneinanderreihung von Schlagworten das sogenannte Keywords Stuffing): Hunde, Welpen, Ausstralian Shepherd, kuschlig
- Akzeptabler Alt-Text: Sieben Welpen
- Guter Alt-Text: Sieben schläfrige, flauschige Hunde-Welpen
- Super Alt-Text: Sieben flauschige Australian-Shepherd-Welpen liegen und sitzen auf zwei Stufen vor einer offenen Tür. Sie sehen verschlafen aus.
Beispiel: Krankenhaus
- Akzeptabler Alt-Text: Eine Person sitzt auf dem Boden und trägt einen Schutzanzug.
- Guter Alt-Text: Ein:e Krankenhausmitarbeiter:in sitzt auf dem Boden und trägt einen Schutzanzug. Sie wirkt erschöpft.
- Super Alt-Text: Ein:e Krankenhausmitarbeiter:in im vollständigen Schutzanzug sitzt zu Zeiten der COVID-19-Pandemie auf dem Boden eines Krankenhausflurs. Sie wirkt erschöpft.
Beispiel: Mitteilung über Veranstaltung / Gala
Möglicher Alt-Text: Eine prunkvolle Halle mit roten Teppichen und opulenten Kronleuchtern. Zahlreiche elegant gekleidete Menschen in Abendgarderobe. Die Beleuchtung in Rot- und Goldtönen erzeugt eine festliche Atmosphäre, im Hintergrund sind hohe Säulen und dekorative Elemente zu sehen.
Beispiel: Theaterstück
Möglicher Alt-Text: Szene aus dem aufgeführten Stück, eine Frau in rotem, langem Kleid erscheint am roten Samtvorhang und stößt einen jungen Mann in Uniform energisch von sich.
Beispiel: Bild eines Museums auf der Webseite
Möglicher Alt-Text: Detailaufnahme einer bunten, abstrakten Landschaft im Museumsfoyer. Große Kugeln und meterhohe Stangen ragen wie ein Fantasiewald in die Luft.
Alt-Texte für Illustrationen, Infografiken & Co.
Je nachdem, welche Art von Grafik wir beschreiben möchten, kann ein Alt-Text ein wenig anders aussehen.
Alt-Texte für Illustrationen
Illustrationen wirken oft dekorativ, können aber gezielt Markenwirkung transportieren, etwa durch einen verspielten, minimalistischen oder seriösen Stil. Wenn die Illustration eine Information hat, die über reine Dekoration hinausgeht, sollte sie einen Alt-Text erhalten.
Beschreibe kurz den visuellen Stil und die Rolle der Illustration im Kontext, damit Menschen mit Sehbeeinträchtigung die beabsichtigte Wirkung nachvollziehen können.
Alt-Texte für Icons
Auch Icons müssen mit einem Alt-Text verständlich gemacht werden. Insbesondere dann, wenn sie klickbar sind und somit gebraucht werden, um die Website zu bedienen.
Im Gegensatz zu Bildern muss bei klickbaren Icons ausschließlich die Funktion beschrieben werden. Beispiel: Statt ein Burger-Menü-Icon als „Drei Linien“ zu beschreiben, nenne es „Menü“. Wir beschreiben also die Funktion, nicht die Form.
Grundsätzlich empfehlen wir allerdings, dass Icons immer einen sichtbaren Text haben, der unter oder neben ihnen steht. Dass wir uns darauf verlassen, dass jeder ein Icon versteht, nur weil wir es verstehen, ist ein großes Problem im Webdesign. Studien zeigen immer wieder, dass weniger Leute als gedacht mit unbeschrifteten Icons klarkommen – zum Beispiel diese Studie der NN-Group über die Erkennbarkeit von Hamburger-Icons (auf Englisch).
Um Icons nachträglich mit einem Alt-Text zu versehen, reicht ein Backend-Zugriff in eurem CMS nicht aus. Hier müssen eure Entwickler:innen ran.
Alt-Texte für Infografiken
Infografiken enthalten häufig komplexe Informationen wie Diagramme oder Statistiken. Diese können nicht in wenigen Sätzen zusammengefasst werden, das macht sie für Alt-Texte ungeeignet.
Geben Sie dem Bild daher eine knappe Kernaussage im Alt-Text und stellen Sie die vollständigen Daten zusätzlich als Text oder Tabelle bereit – oder als Link, der auf eine neue Seite mit einer ausführlichen Beschreibung führt.
Museen / Kunstwerke
Ein Spezialfall ist die Verwendung von Alt-Text im Kontext der digitalen Barrierefreiheit in Museen.
Kurz gesagt: Für Kunstwerke sollte der Alt-Text das Motiv, den bildlichen Kontext und die Gesamtstimmung möglichst kurz, sachlich und präzise beschreiben. Ausführlichere Informationen zur Bedeutung oder Technik gehören in den Begleittext.
Um intensiv in das Thema einzusteigen, empfehlen wir im deutschsprachigen Raum die 2013 erschienene Publikation Das inklusive Museum – Leitfaden für Barrierefreiheit und Inklusion des Arbeitskreises Barrierefreiheit des Deutschen Museumsbunds. Vergleichbare Initiativen gibt es etwa durch die Arbeitsgemeinschaft Inklusives Museum in Österreich.
In den USA sind einzelne Institutionen schon so weit, dass sie offizielle Richtlinien für digitale Barrierefreiheit verfasst haben, z. B. das Cooper Hewitt, Smithsonian Design Museum oder das Carnegie Museums of Pittsburgh Innovation Studio, die sich jeweils dezidiert mit dem Thema Alt-Texte auseinandersetzen.
Braucht wirklich jedes Bild einen Alt-Text?
Nein, nicht alle Bilder benötigen unbedingt einen Alt-Text. Bilder, die keine wichtigen Informationen beinhalten, sondern nur „dekorativ“ verwendet werden, können ohne Alt-Text bleiben. In diesem Fall wird das alt-Attribut leer gelassen (alt = “”).
Zu dekorativen Bildern zählen:
– Inhaltliche Dopplungen, wie ein E-Mail-Icon neben dem Text „E-Mail“
– Sehr generische Bilder wie Stockfotos (aber Achtung: Wenn dadurch Emotionen vermittelt werden, ist es nicht dekorativ!)
– Layoutelemente wie Trennstriche
Wenn ihr euch unsicher seid, schreibt lieber einen kurzen Alt-Text. Auf vielen Social-Media-Plattformen lässt sich ein Bild nicht als „dekorativ“ markieren, hier solltet ihr also immer einen Alt-Text angeben.
Checkliste für verständliche Alt-Texte
- Relevanz prüfen: Vermittelt nur die wichtigsten Informationen.
- Knapp formulieren: So kurz wie möglich, so lang wie nötig.
- Sprache: fließend, natürlich, keine Keywords aneinandergereiht.
- Stimmung & Kontext: Wichtige Emotionen oder Handlungen einbeziehen.
- Dopplungen vermeiden: Keine Hinweise wie „Bild von …“.
- Komplexe Grafiken: Bei Infografiken oder anderen komplexen Bildern zusätzliche Texte oder Links bereitstellen.
Text: kulturBdigital / Gehirngerecht Digital