Alt-Text für Bilder: so schreibst du gute Alternativtexte

Warum das wichtig ist

Ein blinder Besucher hört deine Seite. Trifft sein Screenreader auf ein Bild ohne alt-Attribut, sagt er "Bild", "unbeschriftet" oder liest gleich den Dateinamen vor. "IMG Unterstrich 4711 Punkt jpg" erklärt niemandem, dass auf dem Foto euer neues Ladenlokal zu sehen ist.

In den WCAG steht das ganz vorn: Erfolgskriterium 1.1.1 Nicht-Text-Inhalt, Stufe A. Jede Grafik, die eine Information trägt, braucht eine Textalternative.

Der zweite Nutzen: Google wertet den Alt-Text nach eigener Aussage aus, um zu verstehen, was ein Bild zeigt. Für die Bildersuche ist er einer der wenigen Hebel, die du direkt in der Hand hast.

Was in einen guten Alt-Text gehört

Stell dir vor, du beschreibst das Bild am Telefon. Kurz und konkret, ohne "Bild von" am Anfang, denn dass es ein Bild ist, sagt der Screenreader schon selbst. Ein Satz reicht fast immer.

Entscheidend ist, wozu das Bild auf der Seite steht. Ein verlinktes Logo braucht als Alt-Text das Ziel ("Bäckerei Sonnenschein, zur Startseite") statt einer Beschreibung der Farben. Ein Diagramm bekommt im alt die Kernaussage, die Zahlen gehören in den Text daneben.

• ·Schlecht: alt="bild1" oder alt="Foto". Sagt nichts.
• ·Schlecht: alt="Friseur Köln Friseursalon Haarschnitt Köln günstig". Solche Keyword-Stapel nerven beim Vorlesen und können dir bei Google eher schaden.
• ·Gut: alt="Inhaberin Anna Berg schneidet einer Kundin die Haare".
• ·Gut für ein Schmuckbild wie eine Hintergrundwelle oder ein Stockfoto ohne Aussage: alt="".

So prüfst du es selbst

Am schnellsten geht es mit den Browser-Erweiterungen WAVE oder axe DevTools, die Bilder ohne alt-Attribut direkt auf der Seite markieren.

Lehrreicher ist ein Test mit Screenreader. Unter Windows ist NVDA kostenlos, auf dem Mac ist VoiceOver eingebaut und startet mit Cmd+F5. Hör dir deine Startseite einmal komplett an. Das kostet zehn Minuten.

checkfrei prüft jedes <img> auf ein alt-Attribut und wertet ein leeres alt="" als korrekt markiertes Schmuckbild. Fehlt der Alt-Text bei bis zur Hälfte der Bilder, gibt es eine Warnung, darüber einen Fehler. Ob dein Text das Bild gut beschreibt, kann keine Maschine beurteilen, das bleibt deine Aufgabe. Wie es bei dir aussieht, zeigt der kostenlose Check.

So behebst du es

<!-- Bild mit Inhalt -->
<img src="team.jpg" alt="Das Team der Bäckerei Sonnenschein vor dem Laden in der Hauptstraße">

<!-- Verlinktes Logo: Ziel statt Aussehen beschreiben -->
<a href="/">
  <img src="logo.svg" alt="Bäckerei Sonnenschein, zur Startseite">
</a>

<!-- Schmuckbild: leeres alt, das Attribut bleibt trotzdem stehen -->
<img src="welle.svg" alt="">

Typische Fehler

• ·Das alt-Attribut bei Deko-Bildern ganz weglassen. Ohne Attribut weiß der Screenreader nicht, dass er das Bild überspringen darf.
• ·Die Bildunterschrift im alt wiederholen. Dann hört der Nutzer alles zweimal.
• ·Bilder mit Text darin, etwa ein eingescanntes Plakat oder eine Angebotsgrafik. Der Text muss vollständig in den Alt-Text oder, besser, als echter Text auf die Seite.
• ·Sich auf ein Overlay-Widget verlassen, das Alt-Texte automatisch "nachrüstet". Solche Tools raten, und sie ersetzen keine Beschreibung, die du einmal sauber ins System schreibst.