--- title: Alt-Text url: https://eom.de/glossar/alt-text/ anbieter: EOM, Effektiv Online-Marketing GmbH, Hannover --- # Alt-Text > Ein Alt-Text ist eine kurze Textalternative für ein Bild im alt-Attribut des HTML-Codes, die Screenreader vorlesen und Suchmaschinen zum Verständnis des Bildes nutzen. Dekorative Bilder erhalten ein leeres alt-Attribut. Ein Onlinehändler für Arbeitsschutz verkauft Sicherheitsschuhe in mehreren Farben. Sein Shopsystem setzt als Alt-Text bisher den Dateinamen ein, etwa „IMG_2031“. Für Screenreader-Nutzer klingen damit alle Farbvarianten gleich, und Google erfährt aus dem Bild nichts über das Produkt. Das Team ergänzt deshalb für jedes Produktbild einen kurzen Text mit Modell und Farbe, zum Beispiel „Sicherheitsschuh S3 in Schwarz, Seitenansicht“. Rein dekorative Bilder bekommen ein leeres alt-Attribut, damit der Screenreader sie überspringt. ## Wie funktioniert das alt-Attribut? Der Alt-Text steht im alt-Attribut eines Bildes im HTML-Code. Screenreader lesen ihn vor, und Google nutzt ihn zusammen mit Bilderkennung und dem Inhalt der Seite, um das Bild zu verstehen. Sicherheitsschuh S3 in Schwarz, Seitenansicht Die [WCAG](https://eom.de/glossar/wcag/) verlangen in Kriterium 1.1.1 (Stufe A) für jeden Inhalt, der kein Text ist, eine Textalternative mit demselben Zweck. Für Bilder ist das in der Regel der Alt-Text. ## Wie schreibt man einen guten Alt-Text? Ein guter Alt-Text erfüllt an genau dieser Stelle denselben Zweck wie das Bild. Dasselbe Foto kann deshalb je nach Seite einen anderen Text brauchen. - **Zweck vor Aussehen.** Der Text gibt wieder, was das Bild an dieser Stelle aussagen soll. Eine genaue Beschreibung ist nur nötig, wenn das Aussehen selbst die Information ist. - **Kurz.** Laut WebAIM genügen meist wenige Wörter, selten ein oder zwei kurze Sätze. - **Keine Wiederholung.** Steht die Information schon im Text daneben, muss der Alt-Text sie nicht noch einmal nennen. - **Ohne „Bild von“.** Screenreader kündigen Bilder bereits als Grafik an. | Bild und Zusammenhang | Schwach | Besser | | --- | --- | --- | | Produktfoto im Shop | alt="Arbeitsschuhe kaufen günstig Sicherheitsschuhe S3" | alt="Sicherheitsschuh S3 in Schwarz, Seitenansicht" | | Teamfoto auf der Karriereseite | alt="Bild von Mitarbeitern" | alt="Fünf Kolleginnen und Kollegen der Montage an einer Fertigungsanlage" | | Lupen-Icon als Suchknopf | alt="Lupe" | alt="Suchen" | | Logo mit Link zur Startseite | alt="Logo" | alt="Firmenname, Startseite" | | Balkendiagramm im Geschäftsbericht | alt="Diagramm" | alt="Umsatz 2025 nach Quartalen, Werte in der Tabelle darunter" | ## Wann bleibt das alt-Attribut leer? Leer bleibt das alt-Attribut bei Bildern, die nur schmücken oder deren Inhalt der Text daneben schon nennt. Das W3C empfiehlt dafür alt="", damit Hilfsmittel das Bild überspringen. Fehlt das Attribut ganz, lesen manche Screenreader laut W3C den Dateinamen vor. In der Auswertung WebAIM Million vom Februar 2026 fehlte bei 16,2 % aller Bilder auf den Startseiten der eine Million meistbesuchten Websites der Alt-Text. 45 % dieser Bilder waren verlinkt, sodass auch der Link für Screenreader-Nutzer keinen verständlichen Namen hatte. ## Was gilt für Diagramme und Bilder mit Text? - **Bilder mit Text.** Der Alt-Text enthält denselben Wortlaut wie das Bild. Kriterium 1.4.5 der WCAG (Stufe AA) verlangt, Text möglichst als echten Text darzustellen, Logos sind ausgenommen. - **Diagramme und Grafiken.** Der Alt-Text nennt kurz, was das Bild zeigt. Die Daten selbst stehen als Text oder Tabelle direkt daneben. - **Icons und verlinkte Bilder.** Der Text beschreibt die Funktion, also „Suchen“ für eine Lupe oder den Namen der Zielseite für ein verlinktes Logo. ## Hilft der Alt-Text bei SEO? Ja, vor allem für die Bildersuche. Google schreibt, dass es Alt-Texte zusammen mit Bilderkennung und dem Seiteninhalt nutzt, um ein Bild zu verstehen. Bei verlinkten Bildern dient der Alt-Text außerdem als Ankertext. Von Keyword-Ketten rät Google ausdrücklich ab, weil sie Nutzer stören und die Seite als Spam erscheinen lassen können. Den Rahmen erklärt der Eintrag [SEO](https://eom.de/glossar/seo/). ## Wie pflegt man Alt-Texte im Shop und mit KI? Im Shop gehört der Alt-Text zu den Produktdaten. Jedes Bild eines Produkts beschreibt, was es von den anderen unterscheidet, etwa Ansicht oder Farbe. Ein gemeinsamer Text für alle Bilder eines Artikels hilft wenig. Bei großen Bildbeständen liegt es nahe, Alt-Texte von einem KI-Tool vorschlagen zu lassen. Laut WebAIM erkennen Algorithmen zwar immer besser, was ein Bild zeigt, aber nicht, was es auf einer bestimmten Seite bedeutet. In der WebAIM-Umfrage 2026 gaben zudem 60,1 % der Screenreader-Nutzer an, sich Bildbeschreibungen bereits selbst per KI erzeugen zu lassen. Ein Alt-Text sollte deshalb liefern, was nur die Website weiß, etwa die genaue Modellbezeichnung. 1. **Vorschlag lesen.** Stimmen Produktname und Farbe, und fehlt nichts Wichtiges? 2. **Falsche Details streichen.** KI-Tools beschreiben manchmal Dinge, die das Bild nicht zeigt, eine Form der [KI-Halluzination](https://eom.de/glossar/ki-halluzination/). 3. **Zusammenhang ergänzen.** Der Text passt zur Seite, auf der das Bild steht. In der Prüfung zur [digitalen Barrierefreiheit](https://eom.de/beratung/barrierefreiheit/) bewerten wir Alt-Texte deshalb im Zusammenhang der jeweiligen Seite. ## Typische Fehler bei Alt-Texten - **Keyword-Häufung.** Suchbegriffe ohne Satzbau helfen weder Nutzern noch Google. - **„Bild von“ oder Dateinamen.** Laut WebAIM Million hatten 10,8 % der Bilder mit Alt-Text fragwürdige oder doppelte Texte, etwa „image“ oder einen Dateinamen. - **Bildunterschrift doppelt.** Wiederholt der Alt-Text die sichtbare Unterschrift, hört der Screenreader-Nutzer alles zweimal. - **Leerer Alt-Text bei Links.** Ist ein Bild der einzige Inhalt eines Links, braucht es einen Text, der das Ziel nennt. ## Verwandte Begriffe - [WCAG (Web Content Accessibility Guidelines)](https://eom.de/glossar/wcag/) - [Screenreader](https://eom.de/glossar/screenreader/) - [Barrierefreiheitsstärkungsgesetz (BFSG)](https://eom.de/glossar/bfsg/) - [SEO (Suchmaschinenoptimierung)](https://eom.de/glossar/seo/) - [Google Merchant Center](https://eom.de/glossar/google-merchant-center/) - [Strukturierte Daten (Schema.org)](https://eom.de/glossar/strukturierte-daten/) - [KI-Halluzination](https://eom.de/glossar/ki-halluzination/) ## Quellen - [W3C: WCAG 2.2, Success Criterion 1.1.1 Non-text Content](https://www.w3.org/TR/WCAG22/#non-text-content) - [W3C WAI: Images Tutorial](https://www.w3.org/WAI/tutorials/images/) - [W3C WAI: Decorative Images](https://www.w3.org/WAI/tutorials/images/decorative/) - [WebAIM: Alternative Text](https://webaim.org/techniques/alttext/) - [Google Search Central: Image SEO best practices](https://developers.google.com/search/docs/appearance/google-images) - [WebAIM: The WebAIM Million (2026)](https://webaim.org/projects/million/) - [WebAIM: Screen Reader User Survey #11 Results](https://webaim.org/projects/screenreadersurvey11/) ## Häufige Fragen ### Was bedeutet Alt-Text? Alt-Text steht für Alternativtext, also einen Text, der ein Bild ersetzt. Er steht im alt-Attribut des Bildes im HTML-Code. Oft ist auch von Alt-Tag die Rede, technisch korrekt ist Alt-Attribut. ### Wie lang darf ein Alt-Text sein? So kurz wie möglich, ohne dass Information verloren geht. WebAIM empfiehlt meist wenige Wörter und nur selten ein oder zwei kurze Sätze. Braucht ein Bild mehr Erklärung, etwa ein Diagramm, gehört die ausführliche Beschreibung in den sichtbaren Text daneben. ### Braucht jedes Bild einen Alt-Text? Jedes Bild braucht ein alt-Attribut, aber nicht jedes einen Text darin. Dekorative Bilder erhalten ein leeres Attribut, damit Screenreader sie überspringen. Fehlt das Attribut ganz, lesen manche Screenreader den Dateinamen vor. ### Was ist der Unterschied zwischen Alt-Text und Bildunterschrift? Die Bildunterschrift sehen alle Besucher, der Alt-Text ersetzt das Bild für Menschen, die es nicht sehen. Nennt die Bildunterschrift schon alles Wichtige, kann der Alt-Text kürzer ausfallen oder leer bleiben. Beide sollten nicht denselben Satz wiederholen. ### Verbessern Alt-Texte das Google-Ranking? Alt-Texte helfen Google, ein Bild zu verstehen, und wirken vor allem in der Bildersuche. Bei verlinkten Bildern zählt der Alt-Text wie ein Linktext. Mit Suchbegriffen vollgestopfte Alt-Texte bewertet Google dagegen als schlechte Nutzererfahrung, die als Spam gelten kann. ### Darf ich Alt-Texte von KI schreiben lassen? Ja, als Vorschlag. Prüfen Sie jeden Text, bevor er online geht, denn KI-Tools kennen weder den Zweck des Bildes auf Ihrer Seite noch Ihre Produktbezeichnungen. Falsche Details und Formulierungen wie „Bild von“ streichen Sie. ### Wo trage ich den Alt-Text ein? Content-Management-Systeme und Shopsysteme bieten dafür in der Regel ein eigenes Feld beim Bild. In WordPress steht es in den Details jedes Bildes in der Mediathek. Das Feld für den Titel daneben ist etwas anderes und ersetzt den Alt-Text nicht. ### Braucht ein Logo einen Alt-Text? Ja. Bei einem Logo ohne Link reicht laut W3C der Name des Unternehmens, der Hinweis „Logo“ ist unnötig. Führt das Logo zur Startseite, beschreibt der Alt-Text dieses Ziel. ### Wie finde ich Bilder ohne Alt-Text auf meiner Website? Automatische Prüftools wie WAVE von WebAIM melden fehlende alt-Attribute für jede geprüfte Seite. Ob vorhandene Texte zum Zusammenhang passen, zeigt nur eine Prüfung von Hand. In Shops lohnt sich zusätzlich ein Export der Produktdaten, in dem leere Felder sofort auffallen.