--- title: "Alt-Texte schreiben: So werden Bilder für alle verständlich" url: "https://barrierefreihochzwei.de/de/blog/alt-texte-richtig-schreiben" language: "de" description: "Alt-Texte richtig schreiben: Entscheidungsbaum, dekorative Bilder, Logos, Diagramme und Bilder als Links – mit Vorher-Nachher-Beispielen und Checkliste." published: "2026-09-16T09:00:00+02:00" updated: "2026-10-15T09:42:05+02:00" --- # Alt-Texte schreiben: So werden Bilder für alle verständlich Gute Alt-Texte beschreiben nicht, was auf einem Bild zu sehen ist, sondern was es aussagen soll. So entscheidest du sicher, wann ein Bild einen Text braucht und wie er klingt. Ein Bild sagt mehr als tausend Worte – aber nur, wenn man es sehen kann. Wer mit einem Screenreader unterwegs ist, bekommt von einem Bild genau das mit, was im Alternativtext steht. Fehlt der Text, hört die Person im besten Fall „Grafik“, im schlechtesten Fall einen kryptischen Dateinamen wie „IMG\_4711\_final\_v2.jpg“. Alt-Texte gehören zu den ältesten und bekanntesten Anforderungen der Barrierefreiheit. Trotzdem fehlen sie auf vielen Websites oder sind so geschrieben, dass sie niemandem helfen: „Bild“, „Foto von Team“ oder eine Aneinanderreihung von Suchbegriffen. Das Gute daran: Kaum eine Barriere lässt sich so schnell und günstig beheben. In diesem Artikel lernst du, wie du in wenigen Sekunden entscheidest, ob ein Bild einen Alt-Text braucht, wie ein guter Alt-Text klingt und wie du mit Sonderfällen wie Logos, Diagrammen und verlinkten Bildern umgehst. ## Wozu Alt-Texte da sind Ein Alt-Text ist die Textalternative zu einem Bild. Im HTML steht er im `alt`-Attribut des `img`-Elements. Screenreader lesen ihn vor, Braillezeilen geben ihn aus, und Browser zeigen ihn an, wenn das Bild nicht lädt. Die Grundlage in der WCAG ist das allererste Erfolgskriterium: [1.1.1 Nicht-Text-Inhalt](https://barrierefreihochzwei.de/de/wcag/1-1-1-nicht-text-inhalt). Es verlangt, dass jeder Nicht-Text-Inhalt eine Textalternative hat, die **denselben Zweck** erfüllt. Dieser Zweck ist der Schlüssel. Ein Alt-Text ist keine Bildbeschreibung im Sinne eines Kunstkatalogs. Er soll die Information oder Funktion weitergeben, die das Bild an genau dieser Stelle hat. Dasselbe Foto kann deshalb auf zwei Seiten zwei völlig unterschiedliche Alt-Texte brauchen – oder auf einer Seite gar keinen. Von guten Alt-Texten profitieren nicht nur blinde Menschen. Auch Menschen mit langsamer Verbindung, mit blockierten Bildern im E-Mail-Programm oder mit Sprachassistenten haben etwas davon. Suchmaschinen nutzen Alt-Texte ebenfalls, um Bilder einzuordnen. Barrierefreiheit ist zwar kein direkter Rankingfaktor, aber saubere Textalternativen machen deine Inhalte für Maschinen und Menschen besser verständlich. Wie Screenreader und andere Hilfsmittel im Alltag funktionieren, liest du im Artikel über [assistive Technologien](https://barrierefreihochzwei.de/de/blog/assistive-technologien-im-web). ## Der Entscheidungsbaum: fünf Fragen pro Bild Die Web Accessibility Initiative des W3C hat einen Entscheidungsbaum veröffentlicht, der sich in der Praxis bewährt hat. Vereinfacht kannst du dir bei jedem Bild diese Fragen stellen: 1. **Enthält das Bild Text?** Wenn der Text nicht schon daneben steht, gehört er in den Alt-Text. Besser noch: Setze echten Text statt eines Textbilds ein. 2. **Ist das Bild Teil eines Links oder Buttons?** Dann beschreibt der Alt-Text das Ziel oder die Aktion, nicht das Aussehen. 3. **Trägt das Bild eine Information bei, die nicht im Text steht?** Dann fasse diese Information kurz zusammen. 4. **Ist das Bild ein Diagramm oder eine komplexe Grafik?** Dann brauchst du einen kurzen Alt-Text und zusätzlich eine ausführliche Beschreibung. 5. **Ist das Bild rein dekorativ oder wiederholt es nur, was ohnehin da steht?** Dann bekommt es ein leeres `alt=""`. Die Reihenfolge ist wichtig. Ein Icon kann hübsch aussehen und trotzdem die einzige Beschriftung eines Buttons sein. Dann ist es nicht dekorativ, sondern funktional. ## Informative Bilder: die Aussage, nicht die Pixel Informative Bilder transportieren Inhalte: ein Produktfoto im Shop, ein Porträt neben einem Zitat, eine Karte mit dem Standort. Die Leitfrage lautet: Was müsste ich am Telefon sagen, damit mein Gegenüber dieselbe Information hat? Ein Beispiel aus einem Online-Shop für Schuhe: ``` Schuh Wanderschuh aus braunem Wildleder mit roten Schnürsenkeln, Seitenansicht ``` „Schuh“ ist zwar nicht falsch, hilft aber bei einer Kaufentscheidung nicht weiter. Die Farbe, das Material und die Ansicht sind genau die Informationen, die sehende Kund:innen dem Foto entnehmen. Ein zweites Beispiel aus einem Blog über Stadtentwicklung. Neben dem Text „Der neue Radweg ist seit März freigegeben“ steht ein Foto: - Vorher: `alt="Foto vom Radweg"` - Nachher: `alt="Breiter, rot markierter Radweg, durch Poller von der Autospur getrennt"` Der Text verrät, dass es einen Radweg gibt. Das Bild zeigt, wie er gestaltet ist. Genau dieser Mehrwert gehört in den Alt-Text. ### Faustregeln für die Formulierung Verzichte auf Einleitungen wie „Bild von“ oder „Foto zeigt“. Screenreader kündigen Bilder ohnehin als Grafik an, die Dopplung kostet nur Zeit. Eine Ausnahme ist, wenn die Art des Bildes selbst wichtig ist, etwa bei einem Gemälde, einer Skizze oder einem Screenshot. Schreib so kurz wie möglich und so lang wie nötig. Meist reicht ein Satz oder eine Wortgruppe. Beende den Text mit einem Punkt, wenn es ein ganzer Satz ist, damit die Sprachausgabe eine natürliche Pause macht. Und vermeide Keyword-Listen: „Wanderschuh, Trekkingschuh, Outdoor, günstig“ ist für Menschen wertlos. ## Dekorative Bilder: bewusst stumm schalten Nicht jedes Bild braucht einen Alt-Text. Zierlinien, Hintergrundtexturen, Stimmungsbilder ohne inhaltlichen Bezug oder ein Icon direkt neben einem gleichlautenden Text sind dekorativ. Würde ein Screenreader sie vorlesen, wäre das reines Rauschen. Für solche Bilder setzt du ein leeres Alt-Attribut: ``` ``` Wichtig ist der Unterschied zwischen einem **leeren** und einem **fehlenden** Attribut. Mit `alt=""` sagst du dem Screenreader ausdrücklich: Dieses Bild kannst du überspringen. Fehlt das Attribut ganz, weiß die Software nicht, ob das Bild wichtig ist, und liest je nach Kombination den Dateinamen oder die Bildadresse vor. Automatische Prüftools melden fehlende Alt-Attribute deshalb zu Recht als Fehler. Rein gestalterische Bilder kannst du alternativ als CSS-Hintergrund einbinden. Dann tauchen sie im Inhalt gar nicht erst auf. Achte aber darauf, dass auf diesem Weg keine Informationen verloren gehen. Ein häufiger Grenzfall sind Fotos in Teasern. Wenn ein Blogteaser aus Bild, Überschrift und Anreißer besteht und das Bild nur illustriert, ist `alt=""` oft die beste Wahl. Sonst hört man bei jedem Teaser zuerst eine Bildbeschreibung, bevor man erfährt, worum es eigentlich geht. ## Bilder als Links und Buttons Sobald ein Bild das einzige Element in einem Link oder Button ist, wird sein Alt-Text zum Namen dieses Bedienelements. Er muss also sagen, **was passiert**, nicht wie das Bild aussieht. Das betrifft gleich mehrere Kriterien: [2.4.4 Linkzweck (im Kontext)](https://barrierefreihochzwei.de/de/wcag/2-4-4-linkzweck-im-kontext) und [4.1.2 Name, Rolle, Wert](https://barrierefreihochzwei.de/de/wcag/4-1-2-name-rolle-wert). ``` Einkaufswagen-Symbol Warenkorb ``` Steht neben dem Icon bereits sichtbarer Text, ist das Icon dekorativ. Dann bekommt es `alt=""`, und der Linktext übernimmt die Arbeit. Sonst hört man „Warenkorb Warenkorb“. Bei Inline-SVGs funktioniert das Prinzip genauso, nur mit anderen Mitteln. Ein Icon-Button kann so aussehen: ``` ``` Das SVG wird versteckt, der Button bekommt seinen Namen über `aria-label`. Noch robuster ist ein visuell versteckter Text im Button, weil er auch bei automatischen Übersetzungen mitübersetzt wird. Mehr dazu, wann ARIA hilft und wann nicht, findest du im Artikel über [Tastatur und Fokus](https://barrierefreihochzwei.de/de/blog/tastatur-fokus-ohne-maus). ## Logos Logos sind ein Klassiker unter den Fehlerquellen. Steht ein Logo allein im Kopfbereich und verlinkt auf die Startseite, ist es ein funktionales Bild. Ein bewährtes Muster ist der Firmenname, eventuell ergänzt um das Ziel: - Vorher: `alt="logo_header.png"` oder `alt="Logo"` - Nachher: `alt="Müller & Söhne – zur Startseite"` oder kurz `alt="Müller & Söhne Startseite"` Das Wort „Logo“ selbst bringt keinen Mehrwert. Wichtig ist der Name, denn der steht im Bild als Text. Logos von Partnern oder Kund:innen in einer Referenzliste bekommen schlicht den jeweiligen Firmennamen. Und wenn ein Logo direkt neben dem ausgeschriebenen Firmennamen steht, ist es dekorativ. ## Bilder mit Text Banner mit Aktionen, Zitate als Grafik, Social-Media-Kacheln: Text in Bildern ist schwer zu vergrößern, lässt sich nicht farblich anpassen und kann nicht von Übersetzungstools erfasst werden. Das Kriterium [1.4.5 Bilder von Text](https://barrierefreihochzwei.de/de/wcag/1-4-5-textbilder) verlangt deshalb, dass du für Text grundsätzlich echten Text verwendest, wo die Technik das erlaubt. Logos sind davon ausgenommen. Lässt sich ein Textbild nicht vermeiden, gehört der Text vollständig in den Alt-Text. Ein Banner mit „Sommerschlussverkauf: 30 % auf alle Jacken bis 31. August“ braucht genau diesen Wortlaut als Alt-Text, nicht „Werbebanner“. ## Diagramme, Infografiken und komplexe Bilder Ein Balkendiagramm mit zwölf Monatswerten lässt sich nicht sinnvoll in einen Satz pressen. Hier arbeitest du zweistufig: Ein kurzer Alt-Text benennt, was das Bild ist und was die Kernaussage ist. Die Details stehen in einer ausführlichen Beschreibung, die für alle zugänglich ist, zum Beispiel direkt im Text, in einer Bildunterschrift oder in einer Datentabelle darunter. ```
Balkendiagramm: Umsatz 2025 nach Monaten, Höchstwert im Dezember
Umsatz 2025 nach Monaten. Die Werte findest du in der Tabelle unter dem Diagramm.
``` Die Datentabelle hat einen schönen Nebeneffekt: Auch sehende Menschen schauen gern auf die genauen Zahlen. Bei Infografiken mit Ablauf oder Prozess hilft eine nummerierte Liste im Text, die die Schritte nacherzählt. Die semantische Struktur dahinter fordert [1.3.1 Info und Beziehungen](https://barrierefreihochzwei.de/de/wcag/1-3-1-info-und-beziehungen): Was visuell zusammengehört, muss auch im Code zusammengehören. Vermeide es, die ausführliche Beschreibung in ein `title`-Attribut zu packen. Es erscheint nur beim Überfahren mit der Maus, ist per Tastatur und auf Touch-Geräten praktisch unerreichbar und wird von Screenreadern uneinheitlich behandelt. ## Kontext entscheidet Nimm ein Foto einer Konferenzbühne, auf der eine Rednerin vor einem großen Publikum spricht. Je nach Einsatzort braucht es einen anderen Alt-Text: - Im Rückblick auf die Konferenz: „Julia Becker hält die Eröffnungsrede vor vollem Saal.“ - Auf der Seite zur Raumvermietung: „Großer Saal mit Bühne, Leinwand und ansteigenden Sitzreihen für rund 300 Personen.“ - Als Stimmungsbild im Header einer Landingpage ohne inhaltlichen Bezug: `alt=""`. Für die Redaktion heißt das: Ein Alt-Text gehört eigentlich zur **Verwendung** eines Bildes, nicht zur Datei. Viele Content-Management-Systeme speichern den Alt-Text in der Mediathek und übernehmen ihn überall. Das ist ein guter Startwert, aber prüfe bei jeder neuen Verwendung, ob er noch passt. ## Typische Fehler und wie du sie vermeidest Einige Muster tauchen in Audits immer wieder auf. Wenn du sie kennst, sparst du dir viel Nacharbeit: - **Dateinamen als Alt-Text:** „DSC\_0815.jpg“ entsteht oft automatisch beim Upload. Ein Pflichtfeld im CMS mit kurzer Hilfe verhindert das. - **Doppelte Informationen:** Alt-Text und Bildunterschrift sind wortgleich. Dann wird alles zweimal vorgelesen. Ergänze lieber, statt zu wiederholen. - **Interpretationen statt Fakten:** „Glückliche Kundin“ ist eine Deutung. „Frau lacht und hält ein Paket in der Hand“ ist eine Beschreibung. Bleib beim Sichtbaren, außer die Stimmung ist die Aussage. - **Alles beschreiben:** Lange Absätze über Bildkomposition, Lichtstimmung und Hintergrunddetails kosten Zeit, die niemand zurückbekommt. - **Automatisch generierte Texte ungeprüft übernehmen:** KI-Werkzeuge liefern brauchbare Entwürfe, kennen aber den Zweck des Bildes auf deiner Seite nicht. Sie erkennen keine Personen zuverlässig und erfinden gelegentlich Details. Ein Mensch muss gegenlesen. Ob deine Alt-Texte im Zusammenhang funktionieren, merkst du am schnellsten, wenn du die Seite selbst einmal mit einem Screenreader anhörst. Wie das in einer Viertelstunde geht, zeigt der Artikel zum [Screenreader-Schnelltest](https://barrierefreihochzwei.de/de/blog/screenreader-schnelltest). ## Checkliste für den Alltag - Jedes `img` hat ein `alt`-Attribut, auch wenn es leer ist. - Informative Bilder geben ihre Kernaussage in einem knappen Satz wieder. - Dekorative Bilder haben `alt=""` oder liegen im CSS. - Bilder in Links und Buttons beschreiben das Ziel oder die Aktion. - Logos nennen den Namen, nicht das Wort „Logo“. - Text in Bildern steht vollständig im Alt-Text oder besser als echter Text auf der Seite. - Diagramme haben einen kurzen Alt-Text und eine ausführliche Beschreibung oder Datentabelle. - Kein „Bild von“, keine Dateinamen, keine Keyword-Listen. - Alt-Text und Bildunterschrift ergänzen sich, statt sich zu wiederholen. - Automatisch erzeugte Texte sind von einem Menschen geprüft. ## Fazit Gute Alt-Texte entstehen nicht aus einer Formel, sondern aus einer einfachen Frage: Welche Aufgabe hat dieses Bild an dieser Stelle? Wenn du die beantwortest, ergibt sich der Rest fast von selbst. Informative Bilder bekommen eine knappe Aussage, funktionale Bilder ihre Aktion, dekorative Bilder ein leeres Attribut und komplexe Grafiken eine zusätzliche Beschreibung. Mach Alt-Texte zu einem festen Teil deines Redaktionsprozesses, so selbstverständlich wie Überschrift und Teaser. Mit etwas Übung kostet ein guter Alt-Text weniger als eine Minute und macht deine Inhalte für viel mehr Menschen zugänglich. Einen Überblick über alle Anforderungen rund um Bilder und mehr findest du im [WCAG-Guide](https://barrierefreihochzwei.de/de/wcag). ## Quellen - [W3C WAI: Images Tutorial](https://www.w3.org/WAI/tutorials/images/) - [W3C WAI: An alt Decision Tree](https://www.w3.org/WAI/tutorials/images/decision-tree/) - [W3C: Web Content Accessibility Guidelines (WCAG) 2.2](https://www.w3.org/TR/WCAG22/) - [WebAIM: Alternative Text](https://webaim.org/techniques/alttext/) - [MDN Web Docs: Das img-Element](https://developer.mozilla.org/de/docs/Web/HTML/Element/img)