Alt-Tag

Der Alt-Tag – streng genommen das HTML-alt-Attribut – liefert eine textuelle Beschreibung eines Bildes. Er erfüllt drei zentrale Aufgaben gleichzeitig: Erstens beschreibt er das Bild für Screenreader und macht damit die Webseite für blinde und sehbehinderte Menschen zugänglich. Zweitens wird er angezeigt, wenn das Bild nicht geladen werden kann – sei es bei langsamer Verbindung oder fehlerhaftem Pfad. Drittens hilft er Suchmaschinen, den Bildinhalt zu verstehen, was Image-Search-Rankings und das Verständnis der gesamten Seite verbessert. Aus SEO- und Accessibility-Sicht gehört der Alt-Text damit zu den am häufigsten unterschätzten Pflichtfeldern moderner Web-Entwicklung.

So sieht ein Alt-Tag im HTML aus

<img src="aceart-team.webp" alt="Das Team von aceArt steht vor dem Büroeingang in der Sieglestraße in Stuttgart">

Wichtig: Das Attribut heißt formal nicht „Alt-Tag“, sondern alt-Attribut innerhalb eines <img>-Elements. Der Sprachgebrauch „Alt-Tag“ hat sich aber eingebürgert und ist allgemein verständlich.

Wozu dient der Alt-Text?

Barrierefreiheit

Screenreader (z. B. NVDA, JAWS, VoiceOver) lesen den Alt-Text laut vor, wenn der Cursor über das Bild geht. Ohne Alt-Text bleibt das Bild für blinde Nutzer „leer“ – ein Verstoß gegen die deutsche Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) und die WCAG-Richtlinien.

Fallback bei Ladefehlern

Schlägt das Bild fehl (404, falscher Pfad, langsame Verbindung), zeigt der Browser den Alt-Text statt eines leeren Bilderrahmens. Das hilft Nutzern, den Kontext zu erschließen.

Suchmaschinen-Verständnis

Google ist beim Verstehen von Bildinhalten enorm besser geworden – komplett auf den Alt-Text verlassen kann sich die Suchmaschine aber nicht. Er bleibt das wichtigste Textsignal für ein Bild und ist der Hebel, um in der Google-Bildersuche Sichtbarkeit aufzubauen.

Linktext für Bild-Links

Wenn ein Bild gleichzeitig Hyperlink ist (<a><img></a>), wird der Alt-Text zum Link-Anker – relevant für Screenreader und für SEO.

Was macht einen guten Alt-Text aus?

Konkret und beschreibend

Knapp und auf den Punkt

125 Zeichen sind eine sinnvolle Obergrenze – manche Screenreader schneiden danach ab. Wer einen längeren Text braucht, nutzt zusätzlich aria-describedby oder eine <figcaption>.

Nicht mit „Bild von“ oder „Foto von“ anfangen

Screenreader sagen das automatisch dazu. „Bild von einem Hund“ wird zu „Bild, Bild von einem Hund“ – doppelt gemoppelt.

Kontext berücksichtigen

Das gleiche Foto kann unterschiedliche Alt-Texte verdienen, je nachdem, wofür es eingesetzt wird:

• Auf der Team-Seite: alt="Florian Krüger, Geschäftsführer bei aceArt"
• Im Impressum: alt="Geschäftsführer Florian Krüger"
• In einem Artikel über Webentwicklung: alt="Florian Krüger bei einer Code-Review"

Dekorative Bilder mit leerem Alt-Text

Bilder, die rein dekorativ sind (Hintergründe, Trennlinien, schmückende Icons), sollten leeren Alt-Text bekommen – alt="". Damit signalisiert man explizit: dieses Bild trägt keine Information, Screenreader sollen es überspringen. Wichtig: das Attribut ganz weglassen tut nicht das gleiche – manche Screenreader lesen dann den Dateinamen vor (z. B. „IMG_2342.jpg“), was noch schlechter ist.

Sonderfälle

Logo

alt="Logo der Firma X" reicht. Im Header / Footer reicht oft sogar alt="aceArt GmbH", da das Logo zur Wortmarke gehört.

Icons mit erklärender Funktion

Ein Lupensymbol neben einem Such-Input: alt="Suchen". Ein Telefonhörer-Icon: alt="Telefonnummer". Diese Icons tragen Bedeutung und brauchen einen Alt-Text.

SVG-Icons aus Sprites oder inline

<svg>-Icons haben keinen alt-Attribut. Stattdessen role="img" + <title> oder aria-label setzen:

<svg role="img" aria-label="Suchen"><use href="#search"></use></svg>

Bilder in <figure> mit Bildunterschrift

Wenn eine <figcaption> bereits den Bildkontext beschreibt, kann der Alt-Text kürzer ausfallen – er sollte sich aber inhaltlich von der Caption unterscheiden, nicht wiederholen.

SEO-Wirkung

Ein guter Alt-Text:

• bringt das Bild in die Google Bildersuche – relevanter Traffic-Kanal vor allem im E-Commerce und für Visuelle Marken
• liefert Suchmaschinen zusätzlichen Kontext zum Seiteninhalt
• ist Pflicht-Voraussetzung für das gute Abschneiden in Core Web Vitals und Lighthouse-Accessibility-Score
• fungiert als Anker, wenn das Bild gleichzeitig verlinkt ist

Was kein SEO-Effekt mehr ist: Keyword-Stuffing im Alt-Text. „Stuttgart Webagentur Webentwicklung App Software“ als Alt-Text eines Team-Fotos schadet inzwischen mehr, als es bringt.

Werkzeuge zum Prüfen

• WAVE – Accessibility-Scanner, listet alle Bilder ohne Alt-Text
• Lighthouse – im Accessibility-Audit
• axe DevTools – Browser-Extension, sehr gründlich
• Screen-Reader selbst – VoiceOver (macOS/iOS), NVDA (Windows), TalkBack (Android); ehrliche Probe aufs Exempel

Häufige Fragen zum Alt-Tag

Müssen wirklich alle Bilder einen Alt-Text haben? Ja – jedes <img>-Element soll ein alt-Attribut tragen. Dekorative Bilder bekommen alt="" (leer, aber vorhanden). Nur dann werten Screenreader und Validatoren das Bild als „ordnungsgemäß markiert“ und überspringen es bewusst.

Was ist der Unterschied zwischen alt und title? alt beschreibt den Bildinhalt (für Accessibility und Fallback). title ist ein Tooltip, der beim Hovern erscheint. Beide haben unterschiedliche Aufgaben; title ersetzt alt nicht.

Wie lang darf der Alt-Text sein? Praktische Obergrenze: ~125 Zeichen. Längere Beschreibungen lassen sich in eine <figcaption> oder per aria-describedby auslagern.

Brauchen Hintergrundbilder via CSS einen Alt-Text? Nein – CSS-Backgrounds sind per Definition dekorativ und unsichtbar für Screenreader. Wenn das Bild aber inhaltlich wichtig ist (z. B. ein Hero-Visual mit Botschaft), sollte es als <img> mit Alt-Text eingebunden werden.

Fazit

Der Alt-Tag ist kein Nice-to-have, sondern Pflichtbestandteil jeder professionellen Webseite – aus Gründen der Barrierefreiheit, der rechtlichen Compliance und der Suchmaschinen-Sichtbarkeit. Eine ehrliche Faustregel: Wenn man den Alt-Text laut vorlesen würde, sollte ein Hörer wissen, was auf dem Bild zu sehen ist und warum es da steht. Bei der barrierefreien Konzeption oder dem Audit einer Bestandsseite unterstützen wir dich gerne – im Rahmen unserer SEO-Leistungen oder direkt im unverbindlichen Beratungsgespräch.