Alternativtext: So machst du Bilder für alle zugänglich

Warum Alternativtexte wichtig sind

Ein Alternativtext, kurz Alt-Text, beschreibt, was ein Bild zeigt oder bewirkt. Screenreader lesen ihn vor, Braillezeilen geben ihn in Blindenschrift aus. So erhalten blinde und sehbehinderte Menschen dieselben Informationen, die Sehende dem Bild entnehmen. Der Alternativtext erscheint außerdem, wenn ein Bild nicht lädt, etwa bei einer langsamen Verbindung.

Auch Suchmaschinen nutzen Alternativtexte, um zu verstehen, was ein Bild zeigt. Gute Alternativtexte helfen deshalb dabei, dass deine Bilder in der Bildersuche erscheinen, und verbessern die Auffindbarkeit deiner Website.

Textalternativen sind zudem Pflicht. Das WCAG-Erfolgskriterium 1.1.1 (Nicht-Text-Inhalte) verlangt für jedes Bild, das Informationen vermittelt, eine Textalternative. Es gehört zu den grundlegendsten Regeln der digitalen Barrierefreiheit, und fehlende Alternativtexte zählen zu den häufigsten Fehlern in Barrierefreiheitsprüfungen.

Kurz gesagt:

• Jedes informative Bild braucht einen Alternativtext, der seinen Inhalt beschreibt.

• Jedes funktionale Bild braucht einen Alternativtext, der seine Funktion beschreibt.

• Dekorative Bilder erhalten ein leeres alt-Attribut, damit Screenreader sie überspringen.

So fügst du Alternativtexte ein

In den meisten Content-Management-Systemen (CMS) findest du beim Hochladen oder Bearbeiten eines Bildes ein Feld „Alternativtext“ oder „Alt-Text“. In HTML steht der Alternativtext im alt-Attribut des img-Elements:

<img src="tulpe.jpg" alt="Gelbe Tulpe in einer Glasvase">

Den Alternativtext musst du nicht im title-Attribut wiederholen. Manche Screenreader lesen sonst denselben Text zweimal vor, und title erscheint als Tooltip, sobald die Maus über dem Bild steht. Wenn du sichtbare Informationen zu einem Bild geben möchtest, nutze stattdessen eine Bildunterschrift.

Auch Buttons, Links und Formularfelder ohne sichtbaren Text brauchen einen zugänglichen Namen. Dafür gibt es die Attribute aria-label und aria-labelledby. Mehr dazu findest du in unserem Artikel zu aria-label.

<button type="submit" aria-label="Formular senden">
  <svg aria-hidden="true" focusable="false">…</svg>
</button>

Die verschiedenen Bildarten

Wie ein guter Alternativtext aussieht, hängt davon ab, welche Rolle ein Bild auf der Seite spielt. Frag dich vor dem Schreiben: Was würde jemandem fehlen, der dieses Bild nicht sehen kann?

Informative Bilder

Informative Bilder vermitteln Inhalte, zum Beispiel Fotos, Illustrationen oder Logos. Beschreibe, was für die Aussage der Seite relevant ist, nicht jedes Detail.

<img src="logo.svg" alt="Eye-Able Logo">

Einige Beispiele für schwache und bessere Alternativtexte:

• Statt „Foto“ besser „Mitarbeiterin arbeitet in einem hellen Büro am Laptop“.

• Statt „Logo“ besser „Eye-Able Logo“.

• Statt „Bild eines Diagramms“ besser „Balkendiagramm mit den Umsatzzahlen 2025“.

Enthält ein Bild Text, etwa ein Banner oder eine Zitatgrafik, muss der Alternativtext diesen Text enthalten.

Diagramme und Grafiken

Bei einfachen Diagrammen gehört die Kernaussage in den Alternativtext, zum Beispiel: „Balkendiagramm: Partei A erhielt 34,0 % der Stimmen, Partei B 28,0 %.“

Komplexe Diagramme enthalten zu viele Informationen für einen kurzen Alternativtext. Nenne dann im Alternativtext Diagrammart und Thema und beschreibe die Daten im Text unter dem Diagramm oder in einer Tabelle. Verweise im Alternativtext darauf:

<img src="bevoelkerung.png" alt="Balkendiagramm zur Bevölkerung der Bundesländer. Die Zahlen folgen im Text darunter.">

Wichtige Zahlen sollten immer auch im Text stehen, damit alle sie finden.

Funktionale Bilder

Funktionale Bilder lösen eine Aktion aus oder führen zu einem Ziel: Icons in Buttons, verlinkte Logos oder Pfeile in einem Slider. Ihr Alternativtext beschreibt die Funktion, nicht das Aussehen.

<a href="https://eye-able.com/de/">
  <img src="logo.svg" alt="Eye-Able Startseite">
</a>

Einige Beispiele:

• Lupen-Icon: „Suche starten“, nicht „Lupe“.

• Disketten-Icon: „Speichern“, nicht „Diskette“.

• Pfeil in einem Slider: „Nächste Seite“, nicht „Pfeil nach rechts“.

• Verlinktes Logo: „Startseite“ oder „Eye-Able Startseite“, nicht „Logo“.

Dekorative Bilder

Dekorative Bilder liefern keine Information, zum Beispiel Hintergrundmuster, Trennlinien oder Stimmungsbilder, die nur wiederholen, was der Text schon sagt. Sie erhalten ein leeres alt-Attribut:

<img src="hintergrundmuster.jpg" alt="">

Das Attribut bleibt, aber es bleibt leer. Fehlt das alt-Attribut ganz, lesen viele Screenreader stattdessen den Dateinamen vor.

Checkliste: Braucht ein Bild einen Alternativtext?

Geh diese Fragen der Reihe nach durch und stopp beim ersten „Ja“:

1. Enthält das Bild Text, der nicht an anderer Stelle steht? Dann enthält der Alternativtext diesen Text.

2. Ist das Bild Teil eines Links oder Buttons? Dann beschreibt der Alternativtext die Funktion.

3. Liefert das Bild Informationen, die nicht im umgebenden Text stehen? Dann beschreibt der Alternativtext diese Informationen.

4. Ist das Bild rein dekorativ oder im Text bereits vollständig beschrieben? Dann ein leeres alt-Attribut verwenden: alt="".

So schreibst du gute Alternativtexte

1. Nicht mit „Bild von“ oder „Foto von“ beginnen. Screenreader kündigen bereits an, dass ein Bild folgt. Nenne die Bildart nur, wenn sie wichtig ist, etwa „Illustration“ oder „Screenshot“.

2. Kurz bleiben. Ein bis zwei Sätze reichen. Ziel sind etwa 80 Zeichen, höchstens rund 120. Viele Braillezeilen zeigen 40 bis 80 Zeichen auf einmal, längere Texte sind deshalb mühsam zu lesen.

3. An den Kontext denken. Dasselbe Foto kann auf verschiedenen Seiten unterschiedliche Alternativtexte brauchen. Auf einer Teamseite zählt der Name der Person, in einem Artikel über Homeoffice die Arbeitssituation.

4. Kein Keyword-Stuffing. Alternativtexte sind für Menschen geschrieben. Eine natürliche Beschreibung hilft auch Suchmaschinen am meisten.

5. Keine Copyright-Hinweise und Bildnachweise. Sie gehören in die Bildunterschrift oder ins Impressum, nicht in den Alternativtext.

6. Rechtschreibung, Grammatik und Zeichensetzung prüfen. Screenreader lesen Fehler mit vor und nutzen Satzzeichen für Pausen.

7. Feedback einholen. Lass blinde oder sehbehinderte Menschen deine Alternativtexte prüfen. Alternativ frag jemanden, der das Bild nicht gesehen hat, ob die Beschreibung die richtige Vorstellung vermittelt.

Was passiert, wenn der Alternativtext fehlt?

Fehlt bei einem informativen Bild der Alternativtext, lesen Screenreader oft den Dateinamen vor, zum Beispiel „img123.jpg“ oder „IMG_4711_final.png“. Das sagt Nutzenden nichts. Im schlimmsten Fall können sie einen Link oder Button gar nicht nutzen, weil unklar bleibt, wohin er führt.

Die Folgen im Überblick:

• Blinden und sehbehinderten Nutzenden fehlen Informationen, oder sie kommen nicht weiter.

• Die Website erfüllt das WCAG-Erfolgskriterium 1.1.1 nicht.

• Die Website erfüllt möglicherweise gesetzliche Anforderungen an die Barrierefreiheit nicht, was zu Beschwerden oder Bußgeldern führen kann.

• Suchmaschinen verstehen die Bilder schlechter.

Alternativtexte und gesetzliche Anforderungen

In Deutschland setzt das Barrierefreiheitsstärkungsgesetz (BFSG) den European Accessibility Act (EAA) um. Es gilt seit dem 28.06.2025 für viele digitale Produkte und Dienstleistungen, etwa Onlineshops, Bankdienstleistungen und E-Books. Für Websites öffentlicher Stellen gilt bereits seit Jahren die BITV 2.0.

Technische Grundlage ist die europäische Norm EN 301 549, die auf die WCAG-Konformitätsstufe AA verweist. Textalternativen für Bilder sind eine Kernanforderung. Viele Organisationen müssen außerdem eine Erklärung zur Barrierefreiheit veröffentlichen, in der bekannte Barrieren genannt werden, auch fehlende Alternativtexte.

Da laufend neue Bilder hinzukommen, reicht eine einmalige Prüfung nicht aus. Regelmäßiges Monitoring hilft, fehlende oder leere Alternativtexte zu finden, bevor sie zum Problem werden.

WCAG und Alternativtexte

Diese WCAG-Erfolgskriterien sind für Bilder am wichtigsten:

• 1.1.1 Nicht-Text-Inhalte (Stufe A): Jedes informative und funktionale Bild braucht eine Textalternative. Dekorative Bilder müssen für assistive Technologien ausgeblendet sein.

• 1.4.5 Bilder von Text (Stufe AA): Wo möglich echten Text statt Textgrafiken verwenden. Ist eine Textgrafik unvermeidbar, muss ihr Alternativtext den Text enthalten.

• 2.4.4 Linkzweck (Stufe A): Ist ein Bild der einzige Inhalt eines Links, muss sein Alternativtext klarmachen, wohin der Link führt.

Fazit

Ein guter Alternativtext ist kurz, passt zum Kontext und beschreibt, was ohne das Bild fehlen würde. Informative Bilder erhalten eine Beschreibung, funktionale Bilder eine Beschreibung ihrer Funktion und dekorative Bilder ein leeres alt-Attribut. Mit diesen drei Regeln machst du deine Bilder für alle zugänglich und unterstützt gleichzeitig deine SEO.

Wie vielen Bildern auf deiner Website fehlt ein Alternativtext? Starte einen kostenlosen Barrierefreiheitscheck mit Eye-Able und erhalte dein Ergebnis in weniger als 2 Minuten.

FAQ: Alternativtexte

Was ist ein Alternativtext?

Ein Alternativtext ist eine kurze Textalternative für ein Bild. Screenreader lesen ihn vor, damit blinde und sehbehinderte Menschen die Informationen des Bildes erhalten. Er steht im alt-Attribut in HTML oder im Feld für den Alternativtext im CMS.

Wie lang sollte ein Alternativtext sein?

Etwa 80 Zeichen sind ein guter Richtwert, deutlich mehr als rund 120 sollten es nicht sein. Braucht ein Bild eine längere Beschreibung, etwa ein komplexes Diagramm, gehört sie in den umgebenden Text, und der Alternativtext verweist darauf.

Brauchen dekorative Bilder einen Alternativtext?

Nein. Dekorative Bilder erhalten ein leeres alt-Attribut (alt=""), damit Screenreader sie überspringen. Lass das Attribut aber nicht ganz weg, sonst lesen viele Screenreader den Dateinamen vor.

Was sind die häufigsten Fehler bei Alternativtexten?

Fehlende Alternativtexte, allgemeine Beschreibungen wie „Bild“ oder „Foto“, Dateinamen als Alternativtext, Keyword-Stuffing und Beschreibungen für rein dekorative Bilder. Häufig wird außerdem beschrieben, wie ein Button aussieht, statt was er tut.

Helfen Alternativtexte bei der SEO?

Ja. Suchmaschinen nutzen Alternativtexte, um zu verstehen, was ein Bild zeigt. Das kann die Sichtbarkeit in der Bildersuche verbessern. Am besten wirkt eine natürliche, treffende Beschreibung, keine Aneinanderreihung von Keywords.

Kann KI Alternativtexte schreiben?

KI-Tools können Alternativtexte vorschlagen und bei vielen Bildern Zeit sparen. Sie kennen aber weder den Kontext deiner Seite noch den Zweck eines Bildes. Prüfe und passe automatisch erzeugte Alternativtexte deshalb immer an, bevor du sie veröffentlichst.

Kann Eye-Able prüfen, ob meine Alternativtexte stimmen?

Ja. Die KI-Tests, ein Zusatzmodul für Eye-Able Report, prüfen nicht nur, ob ein Alternativtext vorhanden ist. Die KI betrachtet das Bild selbst und prüft, ob der Alternativtext es passend beschreibt. Zu jedem fehlerhaften Alternativtext erhältst du eine Begründung und einen Korrekturvorschlag, den du prüfen und übernehmen kannst.

Wie prüfe ich Alternativtexte?

Nutze einen Screenreader wie NVDA unter Windows oder VoiceOver unter macOS und iOS und hör dir an, wie deine Bilder angesagt werden. Ein automatischer Barrierefreiheitscheck, etwa mit der Eye-Able Plattform, findet fehlende und leere Alternativtexte auf deiner gesamten Website. Ob ein Alternativtext im Kontext wirklich hilft, sollte am Ende immer ein Mensch entscheiden.