Alt-Texte richtig schreiben

Der Alternativtext eines Bildes beantwortet eine einzige Frage: Was geht jemandem verloren, der das Bild nicht sieht? Genau das – und nicht mehr – gehört ins alt-Attribut. Ein guter Alt-Text beschreibt also nicht das Bild als Pixelhaufen, sondern seine Funktion und Aussage im jeweiligen Kontext.

Das macht Alt-Texte zu einer der Stellen, an denen Barrierefreiheit am stärksten vom Verständnis des Inhalts abhängt. Kein Tool nimmt einem diese Entscheidung vollständig ab – aber sie folgt einer klaren Logik, die schnell in Fleisch und Blut übergeht.

Drei Sorten von Bildern

Bevor ich einen Alt-Text formuliere, ordne ich das Bild einer von drei Kategorien zu. Daraus ergibt sich der Rest fast von selbst:

Informativ: Ein Diagramm, ein Produktfoto, ein Screenshot mit relevantem Inhalt. Hier beschreibt der Alt-Text, was man wissen muss.

Dekorativ: Ein Schmuckbild, ein Trennstrich, ein Hintergrundmuster. Solche Bilder bekommen ein leeres alt="", damit Screenreader sie überspringen.

Funktional: Ein Bild, das selbst ein Link oder Button ist. Dann beschreibt der Alt-Text, wohin es führt oder was es tut – nicht das Aussehen.

Leeres alt ist nicht dasselbe wie kein alt

Das ist der wichtigste technische Punkt überhaupt, und er wird ständig verwechselt:

<!-- Dekorativ: wird korrekt übersprungen -->
<img src="muster.svg" alt="" />

<!-- Fehlt das alt ganz: Screenreader liest oft den Dateinamen vor -->
<img src="IMG_4821.jpg" />

Ein leeres alt="" sagt der assistiven Technik aktiv: „Hier gibt es nichts zu hören.“ Ein fehlendes alt dagegen lässt sie raten – im schlimmsten Fall wird „I-M-G-Unterstrich-4-8-2-1-Punkt-J-P-G“ vorgelesen. Deshalb hat bei mir jedes <img> ein alt, und sei es leer.

Beschreiben, ohne zu beschreiben

Ein paar Gewohnheiten, die gute Alt-Texte ausmachen:

• Nicht mit „Bild von“ oder „Foto von“ beginnen. Dass es ein Bild ist, kündigt der Screenreader bereits an. „Foto von“ ist also doppelt gemoppelt.
• Kontext schlägt Vollständigkeit. Derselbe Sonnenuntergang heißt im Reiseblog „Sonnenuntergang über der Bucht von Kotor“ und im Kamera-Testbericht vielleicht „Beispielaufnahme bei wenig Licht, sichtbares Bildrauschen“. Das Bild ist gleich, die Aussage nicht.
• Text im Bild gehört in den Alt-Text. Steht auf einem Banner „20 % Rabatt bis Sonntag“, muss genau das im alt stehen.
• Kurz halten. Ein, zwei Sätze reichen fast immer. Braucht es mehr – etwa bei einem komplexen Diagramm –, gehört die ausführliche Beschreibung in den Fließtext oder eine Datentabelle daneben.

Funktionale Bilder: das Ziel zählt

Ist ein Bild verlinkt oder ein Button, beschreibt der Alt-Text die Funktion:

<!-- Logo, das zur Startseite führt -->
<a href="/index.html"><img src="logo.svg" alt="Zur Startseite" /></a>

<!-- Bild und Text im selben Link: Bild dekorativ, Text trägt die Aussage -->
<a href="/produkt/stuhl.html">
  <img src="stuhl.jpg" alt="" />
  Bürostuhl „Ergo 200"
</a>

Im zweiten Fall wäre ein beschreibender Alt-Text am Bild sogar störend, weil der Linktext die Information schon liefert – der Screenreader läse sonst alles doppelt.

Häufige Fehler

• alt ganz weggelassen. Führt zum vorgelesenen Dateinamen.
• Dekobild mit beschreibendem alt. Bläht die Ausgabe mit Belanglosem auf – leeres alt="" ist hier richtig.
• „Bild von …“ als Einleitung. Redundant, kostet nur Zeit beim Vorlesen.
• Keyword-Stuffing. alt ist kein SEO-Trick; vollgestopfte Alt-Texte schaden mehr, als sie nutzen.
• Text im Bild ohne Textalternative. Wichtige Aussagen verschwinden für alle, die das Bild nicht sehen.

Häufige Fragen

Hilft ein guter Alt-Text auch der Suchmaschine?

Ja. Suchmaschinen werten alt für die Bildersuche und das Verständnis der Seite aus – ein weiteres Beispiel dafür, wie Semantik und SEO zusammenfallen. Aber: schreibe für Menschen, nicht für den Crawler. Beides zugleich gelingt fast automatisch, wenn der Text ehrlich beschreibt.

Was ist mit CSS-Hintergrundbildern?

Die haben kein alt. Tragen sie Bedeutung, ist es ohnehin meist falsch, sie per CSS einzubinden – dann gehört der Inhalt als echtes <img> mit alt ins Markup. Reine Deko per background-image ist dagegen genau richtig.

Wie ausführlich darf ein Alt-Text sein?

So kurz wie möglich, so lang wie nötig. Für komplexe Inhalte gilt: kurzer alt als Einstieg, die Details in den umgebenden Text. Eine ganze Bildbeschreibung in ein einziges Attribut zu pressen, ist selten die beste Lösung.

Fazit

Ein Alt-Text vermittelt die Funktion und Aussage eines Bildes im Kontext – knapp, ohne „Foto von“, und je nach Bildtyp informativ, leer oder zielbeschreibend. Entscheidend ist die Grundfrage „Was ginge ohne das Bild verloren?“ und die saubere Unterscheidung zwischen leerem und fehlendem alt. Für Symbole und Grafiken gelten ein paar Sonderregeln – die behandelt Icons & SVGs.