Wie schreibt man einen Alternativtext?

Was ein Alternativtext ist

Ein Alternativtext ist der Text, der in HTML im Attribut alt des Elements <img> steht. Man sagt auch Alt-Text, alt-Attribut oder Bildbeschreibung. Wer einen Screenreader nutzt, erkennt das Bild an diesem Text.

Die Grundlage der Regel ist das Erfolgskriterium 1.1.1 Nicht-Text-Inhalt der WCAG. Das Kriterium gehört zur Stufe A. Es verlangt für jeden Nicht-Text-Inhalt, der Nutzern gezeigt wird, eine Textalternative, die denselben Zweck erfüllt.

Das Kriterium hat einige Ausnahmen; zwei sind für Bilder wichtig. Für ein Formularelement genügt ein Name, der seinen Zweck beschreibt. Inhalte, die nur Dekoration sind, nur der Formatierung dienen oder Nutzern nicht gezeigt werden, müssen so ausgezeichnet sein, dass assistive Technologien sie überspringen können.

Den Zweck des Kriteriums erklärt das Begleitdokument des W3C. Eine Textalternative lässt sich über jeden Sinn ausgeben, visuell, hörbar oder tastbar. Wer das Bild nicht sieht, hört es als synthetische Stimme. Die übrigen Kriterien finden Sie im WCAG-Ratgeber.

Wie man einen Alternativtext schreibt

Fragen Sie zuerst, welche Aufgabe das Bild auf dieser Seite hat. Dasselbe Foto trägt auf einer Seite Information und ist auf einer anderen Dekoration. Auch der Leitfaden des W3C zu dekorativen Bildern überlässt die Entscheidung der Autorin und verlangt, auf den Zweck des Bilds auf der Seite zu schauen.

• Schreiben Sie die Aufgabe des Bilds. Der Alternativtext eines Buttons mit Druckersymbol lautet „Diese Seite drucken“. Das ist auch das Beispiel auf der Seite des W3C zu funktionalen Bildern.
• Halten Sie ihn kurz. Laut W3C soll der Alternativtext die kürzestmögliche Beschreibung des Zwecks sein. Reicht ein kurzer Ausdruck oder Satz nicht, wechseln Sie zu einer langen Beschreibung.
• Schreiben Sie nicht „Bild von“, „Grafik“, „Icon“. Die Tipps des W3C halten das meist für unnötig, weil der Screenreader das Bild ohnehin ankündigt. Ist der Unterschied zwischen Tabelle, Foto oder Zeichnung wichtig, dürfen Sie die Art nennen.
• Löschen Sie das alt-Attribut nicht. Laut W3C lesen manche Screenreader den Dateinamen vor, wenn alt ganz fehlt. Schreiben Sie auch bei Zierbildern alt="".
• Machen Sie den Dateinamen nicht zum Alternativtext. Das Begleitdokument der WCAG führt den Dateinamen als Textalternative als Fehler (failure). „IMG_2041.jpg“ sagt niemandem etwas.

Beispiele für Alternativtexte nach Bildart

Der Leitfaden des W3C zu Bildern ordnet Bilder nach ihrem Zweck. Diese fünf Gruppen beschreibe ich unten mit eigenen Beispielen.

Informatives Bild: Produktfoto im Onlineshop

Ein informatives Bild trägt eine Information oder ein Konzept, das sich mit einem kurzen Ausdruck beschreiben lässt. Laut W3C soll die Textalternative die Bedeutung oder den Inhalt wiedergeben, den das Bild zeigt. Das ist oft keine wörtliche Beschreibung des Bilds.

Sagt die Überschrift der Produktseite schon „Rucksack Ada“, bringt es wenig, den Namen im Alternativtext zu wiederholen. Schreiben Sie die Information, die das Foto zeigt und der Text nicht sagt, etwa Farbe und Material. Den Rest der Produktseite beschreibt das Muster zur Produktseite.

• Schwach: alt="Bild Tasche"
• Besser: alt="Rucksack"
• Gut: alt="Roter Lederrucksack, Ansicht von vorn, zwei Vordertaschen mit Reißverschluss"

Dekoratives Bild

Ein dekoratives Bild fügt der Seite keine Information hinzu. Das W3C zählt Formatierungselemente wie Rahmen, Ecken und Abstände zu dieser Gruppe. Auch Zeichnungen, die neben einem Text stehen und ihn nur schmücken, gehören dazu.

Schreiben Sie bei ihnen alt="". Ein leeres alt sagt assistiven Technologien, das Bild zu überspringen. Laut W3C fügt Text bei solchen Bildern der Ausgabe des Screenreaders nur unnötigen Lärm hinzu.

„Leer“ oder „Bild“ als alt-Wert ersetzt kein leeres alt. Das Begleitdokument der WCAG wertet auch „spacer“ oder „image“ bei einem Bild, das übersprungen werden soll, als Fehler.

Funktionales Bild: Logo-Link und Icon-Button

Ist ein Bild der einzige Inhalt eines Links oder Buttons, sagt der Alternativtext, was er tut. Führt das Logo oben links zur Startseite, lautet sein Alternativtext „Marktwerk Startseite“, nicht „Marktwerk Logo“. Das W3C gibt dasselbe Beispiel mit seinem eigenen Logo: „W3C home“.

Steht im Link neben dem Logo ein sichtbarer Text „Marktwerk“, ändert sich die Lage. Das Logo ist dann eine Wiederholung, und das W3C gibt ihm ein leeres alt.

Bei Icon-Buttons gilt dieselbe Regel. Der Alternativtext eines Suchbuttons mit Lupe lautet „Suchen“, der eines Buttons mit Warenkorbsymbol „In den Warenkorb“.

Bild mit Text

Das W3C empfiehlt echten Text, der mit CSS gestaltet ist, statt Text ins Bild einzubetten. Echten Text kann man vergrößern und in der Farbe an die eigenen Bedürfnisse anpassen.

Steht trotzdem Text im Bild, enthält der Alternativtext genau diesen Text. Der Alternativtext eines Banners mit „November-Rabatt: 20 % auf alle Bücher“ ist dieser Satz. Visuelle Details wie Schatten oder verspielte Schrift werden nicht geschrieben.

Logos sind hier ein Sonderfall. Für ein Logo, das kein Link ist, schreibt das W3C nur den Namen der Marke in den Alternativtext und sieht das Wort „Logo“ als unnötig.

Komplexes Bild: Diagramm und Schema

Diagramme, Schemata und Karten passen nicht in einen Satz. Das W3C empfiehlt dafür eine zweiteilige Textalternative: einen kurzen Alternativtext, der das Bild vorstellt, und eine lange Beschreibung mit der eigentlichen Information.

Denken Sie an ein Säulendiagramm in einem Blogbeitrag, das die Rücksendequote nach Quartal zeigt. Der Alternativtext kann lauten: „Säulendiagramm der Rücksendequote nach Quartal. Die Zahlen stehen in der Tabelle darunter.“ Die Zahlen selbst stehen in der Tabelle unter dem Diagramm.

Das W3C empfiehlt, die lange Beschreibung für alle sichtbar auf der Seite zu geben. Bild und Beschreibung gemeinsam in <figure> und <figcaption> zu fassen, ist ein Weg dafür.

Der Entscheidungsbaum des W3C für Alternativtexte

Sind Sie unsicher, in welche Gruppe ein Bild gehört, führt Sie die Seite „An alt Decision Tree“ der W3C WAI der Reihe nach durch fünf Fragen. Sagen Sie bei einer Frage Ja, bekommen Sie entweder ein Ergebnis oder schauen sich die Unteroptionen dieser Frage an. Sagen Sie Nein, gehen Sie zur nächsten Frage.

1. Enthält das Bild Text?
2. Steht das Bild in einem Link oder Button, und wäre der Link oder Button ohne das Bild unverständlich?
3. Trägt das Bild etwas zur Bedeutung der Seite oder des Kontexts bei?
4. Ist das Bild nur Dekoration oder nicht für den Nutzer gedacht?
5. Steht die Verwendung des Bilds oben nicht, oder ist unklar, welchen Alternativtext Sie schreiben sollen?

Die letzte Frage gibt kein Ergebnis. Das W3C schreibt, dass der Baum nicht jeden Fall abdeckt, und verweist auf den Leitfaden zu Bildern.

Im Beispiel unten gibt es fünf ausgedachte Bilder. Wählen Sie eines und beantworten Sie die Fragen. Am Ende sehen Sie den empfohlenen alt-Wert und vergleichen Ihren eigenen Text mit dem Beispiel.

Entscheidungsbaum für Alternativtexte

Unten stehen fünf ausgedachte Bilder mit ihrem Weg durch den Entscheidungsbaum und dem empfohlenen alt-Wert. Mit JavaScript können Sie die Fragen selbst beantworten und Ihren eigenen Alternativtext mit dem Beispiel vergleichen.

1. Produktfoto

   Eine Produktseite im Onlineshop. Die Überschrift lautet „Rucksack Ada“. Das Foto ist das erste Bild der Galerie; Farbe, Material und Taschen stehen nicht im Text.

   1. Enthält das Bild Text? Nein
   2. Steht das Bild in einem Link oder Button, und wäre der Link oder Button ohne das Bild unverständlich? Nein
   3. Trägt das Bild etwas zur Bedeutung der Seite oder des Kontexts bei? Ja
   4. Ist es eine Grafik, ein Diagramm oder eine komplexe Information? Nein
   5. Gibt echter Text in der Nähe dieselbe Information schon wieder? Nein

   Empfohlen: alt="Roter Lederrucksack, Ansicht von vorn, zwei Vordertaschen mit Reißverschluss"

   Das Foto trägt Information, und diese Information steht nicht im Text. Statt den Produktnamen zu wiederholen, habe ich geschrieben, was das Foto zeigt.

2. Logo-Link

   Das Logo oben links auf der Website. Es ist der einzige Inhalt des Links zur Startseite, daneben steht kein Text.

   1. Enthält das Bild Text? Ja
   2. Steht derselbe Text auch als echter Text in der Nähe des Bilds? Nein
   3. Steht der Text nur für einen visuellen Effekt da? Nein
   4. Hat der Text eine bestimmte Funktion? Ist er zum Beispiel ein Link, ein Button oder ein Icon? Ja

   Empfohlen: alt="Marktwerk Startseite"

   Das Logo ist ein Link. Der Alternativtext sagt, wohin der Link führt; das Wort „Logo“ braucht es nicht.

3. Säulendiagramm

   Ein Säulendiagramm in einem Blogbeitrag: Rücksendequote in vier Quartalen. Im Diagramm steht kein Text, und die Zahlen kommen nirgends auf der Seite vor.

   1. Enthält das Bild Text? Nein
   2. Steht das Bild in einem Link oder Button, und wäre der Link oder Button ohne das Bild unverständlich? Nein
   3. Trägt das Bild etwas zur Bedeutung der Seite oder des Kontexts bei? Ja
   4. Ist es eine Grafik, ein Diagramm oder eine komplexe Information? Ja

   Empfohlen: alt="Säulendiagramm der Rücksendequote nach Quartal. Die Zahlen stehen in der Tabelle darunter."

   Ein Diagramm passt nicht in einen Satz. Der Alternativtext stellt es vor und sagt, wo die Zahlen stehen; die Zahlen selbst kommen als Tabelle unter das Diagramm.

4. Zierlinie

   Eine wellige Zierlinie neben der Überschrift einer Aktion. Sie trägt keine Information; fiele sie weg, würde der Seite nichts fehlen.

   1. Enthält das Bild Text? Nein
   2. Steht das Bild in einem Link oder Button, und wäre der Link oder Button ohne das Bild unverständlich? Nein
   3. Trägt das Bild etwas zur Bedeutung der Seite oder des Kontexts bei? Nein
   4. Ist das Bild nur Dekoration oder nicht für den Nutzer gedacht? Ja

   Empfohlen: alt=""

   Das Bild ist nur Dekoration. Mit leerem alt überspringt der Screenreader es und liest dem Nutzer nichts Unnötiges vor.

5. Aktionsbanner

   Ein Aktionsbanner auf der Startseite eines Buchshops. Der Text im Banner steht nicht als echter Text auf der Seite, und das Banner ist kein Link.

   1. Enthält das Bild Text? Ja
   2. Steht derselbe Text auch als echter Text in der Nähe des Bilds? Nein
   3. Steht der Text nur für einen visuellen Effekt da? Nein
   4. Hat der Text eine bestimmte Funktion? Ist er zum Beispiel ein Link, ein Button oder ein Icon? Nein

   Empfohlen: alt="November-Rabatt: 20 % auf alle Bücher"

   Die Information steckt nur im Text im Bild. Der Alternativtext gibt genau diesen Text wieder; visuelle Details wie Großbuchstaben und Farbe werden nicht geschrieben.

Die fünf Bilder und Marken sind ausgedachte Beispiele, die ich gezeichnet habe. Was Sie schreiben, wird nirgendwohin gesendet.

Der Entscheidungsbaum für Alternativtexte ist nach der Seite „An alt Decision Tree“ der W3C WAI gebaut. Die Unteroptionen im Baum habe ich hier in Ja-Nein-Fragen geteilt.

Beeinflusst der Alternativtext die SEO?

Ja, aber nicht durch Keyword-Stuffing. Laut Google Search Central nutzt Google den Alternativtext zusammen mit Algorithmen für maschinelles Sehen und dem Inhalt der Seite, um das Thema eines Bilds zu verstehen.

Laut derselben Seite dient der Alternativtext auch als Ankertext, wenn das Bild ein Link ist. „Marktwerk Startseite“ beim Logo-Link gibt deshalb Nutzern und Suchmaschine dieselbe Information.

Google rät ausdrücklich davon ab, alt-Attribute mit Keywords zu füllen. Es schreibt, dass das eine schlechte Nutzererfahrung schafft und dazu führen kann, dass die Website als Spam gilt. In Googles eigenem Beispiel ist die beste Wahl ein kurzer, konkreter Satz wie „Dalmatian puppy playing fetch“.

Für ein deutsches Produkt gilt dasselbe. Schreiben Sie statt „Rucksack Rucksack Leder Lederrucksack günstig Rucksack“: „Roter Lederrucksack, Ansicht von vorn“.

Wie Sie Alternativtexte prüfen

Zur Prüfung von Hand öffnen Sie die Bilder auf der Seite einzeln und schauen auf ihren alt-Wert. Die Entwicklertools des Browsers zeigen die Attribute jedes Bilds.

Ein automatisches Testtool findet ein fehlendes alt-Attribut leicht. Ob der geschriebene Text die Aufgabe des Bilds beschreibt, muss aber ein Mensch entscheiden. Mit welchem Tool Sie anfangen, beschreibe ich im Ratgeber zu Tools für Barrierefreiheitstests.

Alternativtexte gehören zu den ersten Punkten, die ich mir in einer Barrierefreiheitsprüfung ansehe. Verkaufen Sie in der EU, lesen Sie auch den Ratgeber zum European Accessibility Act. Diese Seite ist keine Rechtsberatung.

Häufige Fehler

• Jedem Bild denselben Text geben. Steht bei allen sechs Fotos der Galerie „Produktbild“, gibt keines eine Information.
• Einem Zierbild eine lange Beschreibung geben. Der Nutzer muss sich die Beschreibung einer welligen Linie anhören und kommt später zum eigentlichen Inhalt.
• Im Link das Aussehen beschreiben. Der Button „Pfeil nach rechts“ in der Galerie sagt nicht, wohin er führt. „Nächstes Foto“ sagt es.
• Alle Zahlen eines Diagramms in den Alternativtext stopfen. Die Zahlen gehören in eine Tabelle oder in den Text, der Alternativtext stellt nur das Bild vor.
• Die Bedingungen einer Aktion nur im Banner lassen. Ist der Alternativtext des Banners leer, erfährt jemand mit Screenreader nichts von der Aktion.
• Den Text daneben wiederholen. Steht im Link schon „Marktwerk“, lässt „Marktwerk“ auch beim Logo den Namen zweimal vorlesen.

Meine Notiz

Das Problem, das ich bei Alternativtexten am häufigsten sehe, sind automatisch befüllte Alternativtexte. Das Content-Management-System kopiert den Dateinamen oder den Produktnamen in jedes Bild. Weil das Attribut gefüllt ist, kommt keine Warnung wegen fehlendem alt. Wer einen Screenreader nutzt, erfährt vom Bild aber nichts.

Ich sehe den Alternativtext als Teil des Content-Designs. Warum ein Bild auf der Seite steht, weiß am besten, wer die Seite schreibt. Deshalb empfehle ich, auf dem Screen zum Hochladen von Bildern ein Kästchen „Ist dieses Bild nur Dekoration?“ einzubauen.

Wenn Sie unsicher sind, fragen Sie sich: Was würde dieser Seite fehlen, wenn ich das Bild entferne? Schreiben Sie das, was fehlt. Fehlt nichts, ist alt="" die richtige Antwort.