Alt-Texte für Bilder: So schreiben Sie sie richtig

Wofür Alt-Texte da sind

Screenreader lesen den Alt-Text vor. Er erscheint auch, wenn ein Bild nicht lädt. Suchmaschinen nutzen ihn, um den Inhalt eines Bildes zu verstehen. Damit ist er zugleich Teil der Barrierefreiheit und der Auffindbarkeit.

So schreiben Sie ihn

• Beschreiben Sie, was zu sehen ist, in einem kurzen Satz oder Satzteil.
• Nennen Sie, was für den Zusammenhang wichtig ist.
• Verzichten Sie auf „Bild von …“ oder „Foto von …“.
• Keine Aneinanderreihung von Suchbegriffen.

Beispiele

• Schwach: „Heizung Stuttgart günstig Heizungsbau“
• Besser: „Monteur installiert eine Wärmepumpe im Keller eines Einfamilienhauses“

Wann der Alt-Text leer bleibt

Rein dekorative Bilder, die keine Information tragen, bekommen ein leeres Alt-Attribut, damit Screenreader sie überspringen.

Welche Bilder was brauchen

Nicht jedes Bild verlangt denselben Aufwand. Die Entscheidung hängt von der Aufgabe des Bildes ab:

• Informative Bilder (Produktfoto, Teamfoto, Baustellenbild): Beschreiben, was zu sehen ist und was für den Zusammenhang zählt.
• Bilder als Link oder Knopf (etwa ein Logo, das zur Startseite führt): Der Alt-Text nennt das Ziel oder die Funktion, zum Beispiel „Zur Startseite“, nicht das Aussehen.
• Diagramme und Grafiken: Kurz die Kernaussage nennen, Details gehören in den Text daneben.
• Reine Dekoration (Zierlinien, Hintergrundmuster): leeres Alt-Attribut.

Vergleich am Beispiel

Ein Foto zeigt eine Mitarbeiterin, die in einer Werkstatt ein Werkstück mit einer Messlehre prüft. Auf einer Seite über Qualitätssicherung passt „Mitarbeiterin prüft in der Werkstatt ein Werkstück mit einer Messlehre“. Auf einer Teamseite wäre „Sabine Beispiel, Werkstattleiterin“ sinnvoller, weil dort die Person die Information ist. Dasselbe Bild kann also je nach Seite einen anderen Alt-Text bekommen.

Häufige Fehler

• Fehlendes Attribut: Dann liest ein Screenreader unter Umständen den Dateinamen vor, etwa „IMG underscore 4711 punkt jpg“. Ein leeres Attribut ist besser als gar keines.
• Zu lang: Mehr als ein bis zwei knappe Sätze überfordern beim Vorlesen. Als grober Anhaltspunkt gelten bis etwa 125 Zeichen, entscheidend ist die Knappheit.
• Text im Bild vergessen: Steht im Bild eine wichtige Aussage, muss sie im Alt-Text oder besser als echter Text auf der Seite stehen.
• Doppelungen: Wenn die Bildunterschrift das Bild schon beschreibt, genügt ein kurzer oder leerer Alt-Text.

Prüfen und nachbessern

Gehen Sie die wichtigsten Seiten durch und lassen Sie sich die Alt-Texte anzeigen, etwa über die Entwicklerwerkzeuge des Browsers. Ein praktischer Test: Lesen Sie die Alt-Texte einer Seite hintereinander, ohne die Bilder zu sehen. Ergibt sich ein verständlicher Eindruck, passt es. Für öffentliche Stellen und zunehmend auch Unternehmen gewinnt das Thema durch das Barrierefreiheitsstärkungsgesetz an Gewicht, Näheres unter Barrierefreiheit und BFSG.

Alt-Text und Bildsuche

Der Alt-Text ist nur eines von mehreren Signalen, die Suchmaschinen für Bilder nutzen. Dazu zählen auch der Text rund um das Bild, der Dateiname und die Seite insgesamt. Ein präziser, natürlicher Alt-Text unterstützt das, ersetzt aber keinen guten Zusammenhang. Wer Bilder in die passende Textstelle setzt und sachlich beschreibt, tut automatisch das Richtige für Nutzer und Suche zugleich.

Dateinamen und Größe

Sprechende Dateinamen helfen zusätzlich. Bilder sollten nicht größer sein als nötig, das schont die Ladezeit. Siehe Core Web Vitals verbessern.