Alt-Texte richtig schreiben: Beispiele für Websites und Online-Shops

Alt-Texte wirken auf den ersten Blick wie eine Kleinigkeit.

Irgendwo im CMS gibt es ein Feld „Alternativtext“, man schreibt schnell etwas hinein, und dann ist das Thema erledigt. Zumindest fühlt es sich oft so an.

Genau hier gehen viele Alt-Texte kaputt: Das Feld wird gefüllt, ohne vorher zu klären, wofür das Bild auf der Seite überhaupt da ist.

Ich starte bei Alt-Texten deshalb lieber mit dieser Frage:

Welche Information fehlt, wenn dieses Bild nicht sichtbar ist?

Kurz gesagt

Ein guter Alt-Text ersetzt die Information, die das Bild auf dieser konkreten Seite vermittelt. Meistens reicht dafür ein kurzer Satz.

Ein paar Regeln reichen für den Anfang:

• Wenn ein Bild Information trägt, braucht es einen Alt-Text.
• Wenn ein Bild nur Dekoration ist, bleibt der Alt-Text leer.
• Wenn ein Bild in einem Link oder Button steckt, muss die Funktion verständlich sein.
• Wenn dieselbe Information direkt daneben als Text steht, muss sie nicht doppelt vorgelesen werden.
• Wenn ein Bild zu komplex für einen Satz ist, gehört die Erklärung in den sichtbaren Text.

Technisch geht es in den WCAG vor allem um Erfolgskriterium 1.1.1 „Nicht-Text-Inhalt“. Nicht-textliche Inhalte brauchen eine Textalternative, die denselben Zweck erfüllt. Dekorative Bilder dürfen ignoriert werden.

Wenn du im CMS arbeitest: Du musst normalerweise nicht alt="..." schreiben. Du trägst nur den Text ins Feld „Alternativtext“ ein. Wenn ein Bild dekorativ ist, lässt du dieses Feld leer oder markierst das Bild als dekorativ.

Warum viele Alt-Texte schlecht sind

Manche Alt-Texte folgen einem schlechten Muster:

<img src="team.jpg" alt="Bild" />
<img src="product.jpg" alt="Produkt" />
<img src="hero.jpg" alt="Frau am Laptop" />
<img src="diagramm.png" alt="Diagramm" />

Das ist formal manchmal besser als gar nichts, aber praktisch oft wertlos.

„Bild“ sagt nichts. „Produkt“ sagt fast nichts. „Diagramm“ sagt auch nur, dass es ein Diagramm gibt. Die eigentliche Information fehlt weiterhin.

Auf der anderen Seite gibt es dann die SEO-Variante:

<img
  src="schuh.jpg"
  alt="Sneaker kaufen günstige Sneaker online Damen Sneaker weiß Sale"
/>

Das ist nicht barrierefrei, sondern einfach Spam, der Menschen zwanghaft vorgelesen wird. Ein guter Alt-Text ist hingegen meistens unspektakulär und prägnant.

Der Kontext entscheidet

Nehmen wir ein Foto von einer Person mit Laptop an einem Schreibtisch.

Auf einer Karriereseite kann die relevante Information sein:

<img
  src="team-workshop.jpg"
  alt="Mitarbeiter:innen arbeiten gemeinsam in einem Workshopraum."
/>

Auf einer Seite über ergonomische Arbeitsplätze kann ein anderer Alt-Text sinnvoll sein:

<img
  src="arbeitsplatz.jpg"
  alt="Person arbeitet an einem höhenverstellbaren Schreibtisch mit externem Bildschirm."
/>

Auf einer Landingpage, wo das Bild nur Stimmung macht, kann der beste Alt-Text leer sein:

<img src="laptop-hero.jpg" alt="" />

Genau deshalb kann kein Tool zuverlässig „den richtigen“ Alt-Text ausgeben. Ein Tool sieht vielleicht das Bild, es erkennt aber nicht automatisch die Absicht der Seite.

Wann ein Bild einen Alt-Text braucht

Ein Bild braucht einen Alt-Text, wenn ohne dieses Bild eine Information verloren geht.

Typische Fälle:

• Produktbilder
• Mitarbeiter:innen-Fotos, wenn die Personen relevant sind
• Screenshots, die einen Fehler oder Zustand zeigen
• Logos, wenn der Name nicht daneben steht
• Icons, wenn sie die einzige sichtbare Information für eine Aktion sind
• Diagramme, Infografiken und Prozessgrafiken
• Bilder mit Text, wenn dieser Text nicht zusätzlich als echter Text vorhanden ist

Ein Screenshot ist ein gutes Beispiel.

Schlecht:

<img src="error.png" alt="Screenshot" />

Besser:

<img
  src="error.png"
  alt="Kontaktformular mit Fehlermeldung beim Feld E-Mail-Adresse."
/>

Wenn der Screenshot ein echtes Problem zeigt, reicht der Alt-Text oft nicht aus. Dann gehört die Erklärung zusätzlich in den sichtbaren Text:

<figure>
  <img
    src="error.png"
    alt="Kontaktformular mit Fehlermeldung beim Feld E-Mail-Adresse."
  />
  <figcaption>
    Nach dem Absenden springt der Fokus nicht zur Fehlermeldung. Nutzer:innen
    müssen selbst herausfinden, welches Feld betroffen ist.
  </figcaption>
</figure>

Der Alt-Text benennt das Bild. Der Text darunter erklärt, warum es wichtig ist.

Wann ein leerer Alt-Text richtig ist

Wenn ein Bild nur dekorativ ist, sollte es nicht vorgelesen werden. Sonst wird die Seite für Screenreader-Nutzer:innen nur länger und mühsamer.

<img src="background-shape.svg" alt="" />

Im CMS heißt das meistens: Alt-Text-Feld leer lassen oder das Bild als dekorativ markieren. Nicht alt="" in das Feld schreiben.

Wichtig ist nur: leer ist nicht dasselbe wie fehlend.

<!-- Gut, wenn das Bild dekorativ ist -->
<img src="pattern.svg" alt="" />

<!-- Schlecht -->
<img src="pattern.svg" />

Wenn das alt-Attribut fehlt, können Screenreader je nach Situation Dateinamen oder andere technische Informationen ausgeben. Das hilft niemandem.

Leerer Alt-Text passt zum Beispiel bei:

• Hintergrundmustern
• rein dekorativen Stockfotos
• Icons neben einem bereits verständlichen Linktext
• Bildern, deren Inhalt direkt daneben vollständig als Text steht

Ein Icon neben einem Link braucht keine eigene Beschreibung:

<a href="/kontakt">
  <img src="mail.svg" alt="" />
  Kontakt aufnehmen
</a>

„Briefumschlag, Kontakt aufnehmen“ wäre hier einfach doppelt.

Beispiele: schlecht und besser

Kontext	Schlecht	Besser
Teamfoto auf einer Über-uns-Seite	alt="Bild"	alt="Das Team von Beispiel GmbH in einem Besprechungsraum."
Hero-Stockfoto ohne Zusatzinformation	alt="Frau am Laptop"	leerer Alt-Text
Produktbild	alt="Produkt"	alt="Schwarzer Wanderrucksack mit Brustgurt und seitlichen Netztaschen."
Such-Icon als Button	alt="Lupe"	Button-Name: Suche öffnen; Icon leer lassen
Diagramm	alt="Diagramm"	alt="Balkendiagramm zu gefundenen Barrieren nach Typ." plus Erklärung im Text
Bild mit Text	alt="Grafik"	Text als echten HTML-Text ausgeben oder denselben Text im Alt-Text anbieten

Die bessere Variante gewinnt nicht durch Länge, sondern durch Nutzen.

Logos

Logos sind ein Klassiker.

Wenn ein Logo allein auf die Startseite verlinkt, sollte das Ziel klar sein:

<a href="/">
  <img src="solasit-logo.svg" alt="Solasit Startseite" />
</a>

Wenn der Firmenname direkt daneben als Text steht, kann das Logo leer bleiben:

<a href="/" aria-label="Solasit Startseite">
  <img src="solasit-logo.svg" alt="" />
  <span>Solasit</span>
</a>

In einem Partner:innen- oder Sponsor:innenbereich ist der Firmenname selbst oft die Information:

<img src="partner-logo.svg" alt="Partnerfirma Beispiel AG" />

Für Nutzer:innen zählt hier vor allem: Welche Marke ist gemeint, oder wohin führt der Link?

Icons und Buttons

Bei Icon-Buttons geht es weniger um den Alt-Text des Icons und mehr um den Namen des Buttons.

Ein Papierkorb-Icon soll nicht als „Papierkorb“ vorgelesen werden, wenn die Aktion eigentlich „Produkt entfernen“ heißt.

Schlecht:

<button>
  <img src="trash.svg" alt="Papierkorb" />
</button>

Besser:

<button aria-label="Wanderrucksack aus dem Warenkorb entfernen">
  <img src="trash.svg" alt="" />
</button>

Der Button hat dadurch einen Namen, den Screenreader vorlesen können. Das Icon selbst bleibt leer.

Bei Inline-SVGs gibt es kein alt-Attribut. Dekorative SVG-Icons werden meistens für assistive Technologien ausgeblendet, während der Button den Namen bekommt:

<button aria-label="Suche öffnen">
  <svg aria-hidden="true" focusable="false">...</svg>
</button>

Gute Namen sind konkret:

• Suche öffnen
• Menü schließen
• Passwort anzeigen
• Wanderrucksack aus dem Warenkorb entfernen

Schwach sind Namen wie:

• Icon
• Pfeil
• Mehr
• Button
• Klick hier

„Mehr“ ist leider besonders beliebt, und fast immer zu wenig Information.

Produktbilder im Online-Shop

In Online-Shops können Alt-Texte Informationen enthalten, die für die Auswahl wichtig sind.

Farbe, Material, Muster, Zustand, Variante, Zubehör oder Größenverhältnis können für die Auswahl relevant sein. Dann brauchen Kund:innen diese Information auch als Text.

Schlecht:

<img src="rucksack-1.jpg" alt="Rucksack" />

Besser:

<img
  src="rucksack-1.jpg"
  alt="Schwarzer Wanderrucksack, 35 Liter, mit Brustgurt und zwei seitlichen Netztaschen."
/>

Bei Produktgalerien darf sich der Alt-Text je nach Ansicht unterscheiden:

<img
  src="schuh-seite.jpg"
  alt="Seitliche Ansicht des weißen Sneakers mit schwarzer Sohle."
/>
<img
  src="schuh-profil.jpg"
  alt="Profil der schwarzen Gummisohle des weißen Sneakers."
/>
<img
  src="schuh-detail.jpg"
  alt="Detailansicht der Schnürung und des weißen Obermaterials."
/>

Dreimal derselbe Alt-Text ist hier nicht hilfreich.

Es gibt aber auch hier dekorative Fälle. Wenn eine Produktkarte ein Bild und direkt daneben den Produktnamen enthält, kann das Bild leer bleiben:

<a href="/rucksack">
  <img src="rucksack.jpg" alt="" />
  <span>Wanderrucksack Trek 35, schwarz</span>
</a>

Sobald das Bild zusätzliche Information liefert, die im Text nicht vorkommt, braucht es wieder einen sinnvollen Alt-Text.

Diagramme und Infografiken

Ein Diagramm passt selten in einen einzigen Alt-Text.

Natürlich kann man versuchen, alle Details in das alt-Attribut zu stopfen. Das Ergebnis ist aber meistens schlecht lesbar und schlecht wartbar.

Besser: kurzer Alt-Text, Erklärung im sichtbaren Text.

<figure>
  <img
    src="barrieren-nach-typ.png"
    alt="Balkendiagramm zu gefundenen Barrieren nach Typ."
  />
  <figcaption>
    In der Stichprobe traten die meisten Probleme bei Formularen,
    Alternativtexten und Tastaturbedienung auf.
  </figcaption>
</figure>

Wenn genaue Zahlen wichtig sind, gehören sie zusätzlich in eine Liste oder Tabelle:

Typ	Anzahl
Formulare	18
Alt-Texte	14
Tastaturbedienung	9

Damit kann die Information gelesen, kopiert, durchsucht und geprüft werden, und ist nicht in der Grafik verloren.

Alt-Texte und einfache Sprache

Alt-Texte sind Inhalt. Deshalb gelten hier dieselben Regeln wie bei Buttontexten, Fehlermeldungen oder Formularhinweisen.

Wenn der Text unnötig kompliziert ist, wird die Seite unnötig schwer verständlich.

In der Barrierefreiheit wird oft über einfache Sprache und Leichte Sprache gesprochen. Die Begriffe werden gerne vermischt. Leichte Sprache ist aber ein eigenes Regelwerk und wird idealerweise von Menschen aus der Zielgruppe geprüft.

Für Alt-Texte reicht im Alltag oft schon der erste Schritt: klar schreiben.

Schlecht:

<img
  src="prozess.jpg"
  alt="Visualisierung eines holistischen Optimierungsprozesses zur Verbesserung digitaler Touchpoints."
/>

Besser:

<img
  src="prozess.jpg"
  alt="Checkliste mit den Punkten Tastatur, Kontrast, Formulare und Alt-Texte."
/>

Noch ein Beispiel:

<img
  src="form-error.jpg"
  alt="Validierungsbezogene Interface-Komponente mit inkonsistenter Fehlerkommunikation."
/>

Besser:

<img
  src="form-error.jpg"
  alt="Kontaktformular mit Fehlermeldung beim Feld E-Mail-Adresse."
/>

Für Alt-Texte heißt das konkret:

• kurze Sätze
• konkrete Wörter
• Fachbegriffe nur, wenn sie nötig sind
• keine Marketingfloskeln
• keine Wortspiele, wenn sie für das Verständnis wichtig sind
• das Wichtigste zuerst

Ein einfacher Test: Lies den Alt-Text laut vor.

Wenn er wie ein Satz aus einer Ausschreibung klingt, ist er wahrscheinlich zu kompliziert.

Was automatische Tests finden

Automatische Tests sind bei Alt-Texten nützlich, aber begrenzt.

Sie finden oft:

• Bilder ohne alt-Attribut
• verlinkte Bilder ohne zugänglichen Namen
• leere Icon-Buttons
• problematische SVG- oder ARIA-Strukturen
• manchmal auch verdächtige Alt-Texte wie Dateinamen

Das ist gut. Damit findet man schnell technische Fehler.

Bei diesen Fragen braucht es weiterhin menschliche Bewertung:

• Reicht alt="Team" in diesem Kontext?
• Ist alt="" bewusst dekorativ oder versteckt es versehentlich Information?
• Beschreibt ein Produktbild die relevanten Eigenschaften?
• Wird ein Diagramm im Text ausreichend erklärt?
• Ist der Text verständlich genug?

Auch KI ändert daran nur teilweise etwas.

KI kann Vorschläge machen. Sie kann vielleicht erkennen, dass ein Schuh weiß ist. Sie weiß aber nicht automatisch, ob auf dieser Produktseite Farbe, Material, Zustand oder eine bestimmte Funktion relevant ist.

Und KI sollte keine sensiblen Eigenschaften erraten oder irrelevante Details beschreiben, nur weil sie im Bild sichtbar sind.

Mini-Checkliste

Wenn du deine Website prüfst, gehe Bild für Bild durch und frage:

• Fehlt ohne dieses Bild eine Information?
• Ist das Bild dekorativ?
• Ist das Bild Teil eines Links oder Buttons?
• Hat dieser Link oder Button einen verständlichen Namen?
• Steht dieselbe Information schon als Text daneben?
• Ist der Alt-Text kurz genug, um vorgelesen verständlich zu bleiben?
• Sind Produktmerkmale wie Farbe, Material, Variante oder Zustand wichtig?
• Braucht ein Diagramm zusätzlich eine Erklärung im Text?
• Würde ich diesen Satz jemandem laut vorlesen wollen?

Die wichtigste Frage bleibt:

Versteht eine Person die relevante Information auch dann, wenn sie das Bild nicht sehen kann?

Fazit

Alt-Texte sind kleine Inhaltsentscheidungen. Man muss entscheiden, ob ein Bild Information trägt, ob es nur Dekoration ist, ob es eine Funktion auslöst oder ob die Erklärung besser in den sichtbaren Text gehört.

Wenn du Alt-Texte so betrachtest, werden sie automatisch besser. Und meistens wird dabei auch der sichtbare Inhalt klarer.

Nächster Schritt

Prüfe zuerst die wichtigsten Seiten: Startseite, Produktseiten, Kontaktformular und häufig besuchte Landingpages. Dort sind falsche oder fehlende Alt-Texte am relevantesten.

Wenn du einen ersten Überblick möchtest, starte mit einem automatisierten Check:

Kostenlosen Barrierefreiheits-Check auf barrieretest.at starten

Wenn du wissen möchtest, welche Alt-Texte wirklich kritisch sind und welche Bilder im Kontext geprüft werden sollten, ist eine manuelle Prüfung der nächste Schritt:

WCAG-Audit und Barrierefreiheitsprüfung bei Solasit ansehen