Alternativtexte schreiben, die wirken (mit Beispielen)

Fehlende oder wenig hilfreiche Alternativtexte gehören zu den häufigsten Barrieren im Web und zugleich zu den am leichtesten zu beheben. Gute Alternativtexte helfen Menschen, die Screenreader nutzen, Ihre Bilder zu verstehen, und sie helfen auch Suchmaschinen und KI-Assistenten, Ihre Seiten zu erfassen. Dieser Leitfaden zeigt Ihnen, wie Sie Alternativtexte schreiben, die wirklich weiterhelfen, mit Beispielen zum Übernehmen.

Was ist ein Alternativtext?

Ein Alternativtext (kurz Alt-Text) ist eine kurze Beschreibung, die im alt-Attribut eines Bildes steht. Screenreader lesen ihn vor, Browser zeigen ihn an, wenn ein Bild nicht geladen werden kann, und Suchmaschinen nutzen ihn, um zu verstehen, was das Bild zeigt. Er ist durch das WCAG-Erfolgskriterium 1.1.1, Nicht-Text-Inhalt vorgeschrieben, eine Anforderung der Stufe A, und gehört damit zu jeder Diskussion über ADA- und EAA-Konformität.

Fünf Regeln für gute Alternativtexte

1. Beschreiben Sie den Zweck, nicht nur das Bild. Fragen Sie sich: Warum steht dieses Bild hier? Schreiben Sie die Information auf, die es der Seite hinzufügt.
2. Fassen Sie sich kurz. In der Regel genügt ein kurzer Satz oder weniger. Längere Erklärungen gehören in den umgebenden Text.
3. Verzichten Sie auf „Bild von“ oder „Foto von“. Screenreader kündigen bereits an, dass es sich um ein Bild handelt.
4. Übernehmen Sie Text, der im Bild vorkommt. Enthält eine Grafik Wörter, sollte der Alternativtext sie ebenfalls enthalten.
5. Vermeiden Sie Keyword-Stuffing. Schreiben Sie für Menschen. Natürliche, korrekte Beschreibungen sind auch das, was Suchmaschinen belohnen.

Beispiele für Alternativtexte

Informative Bilder

Sie ergänzen den Inhalt um Informationen.

• Schwach: alt="Wanderer"
• Besser: alt="Wanderer in roter Jacke auf einem felsigen Grat bei Sonnenaufgang"

Produktbilder

Käuferinnen und Käufer brauchen die Details, die bei der Auswahl helfen.

• Schwach: alt="Jacke"
• Besser: alt="Weiße, gefütterte Damen-Steppjacke mit Kapuze, Vorderansicht"

Funktionale Bilder: Links und Schaltflächen

Wenn ein Bild ein Link oder eine Schaltfläche ist, beschreiben Sie, was es bewirkt, nicht, wie es aussieht.

• Logo mit Link zur Startseite: alt="Reguweb Startseite"
• Suchschaltfläche mit Lupe: alt="Suchen"
• Einkaufstaschen-Symbol: alt="Warenkorb anzeigen, 2 Artikel"

Bilder von Text

Geben Sie den Text exakt wieder. Ein Banner mit der Aufschrift „Frühjahrsaktion: 20 % Rabatt auf alle Stiefel“ sollte genau diesen Text als Alternativtext erhalten.

Diagramme und Infografiken

Geben Sie im Alternativtext eine kurze Zusammenfassung und legen Sie die vollständigen Daten in einem nahen Text oder einer Tabelle ab.

• alt="Balkendiagramm: Der Website-Traffic stieg von Januar bis Juni um 40 %", gefolgt von einer Datentabelle auf der Seite

Dekorative Bilder

Hintergrundtexturen, Trennlinien und rein dekorative Illustrationen sollten ein leeres Alt-Attribut haben, alt="", damit Screenreader sie überspringen. Lassen Sie das Attribut nicht ganz weg: Ohne es lesen manche Screenreader stattdessen den Dateinamen vor, etwa „IMG Unterstrich 4032 Punkt jpeg“.

Bilder mit Bildunterschrift

Wenn die Bildunterschrift das Bild bereits vollständig beschreibt, halten Sie den Alternativtext kurz und wiederholen Sie die Bildunterschrift nicht wortwörtlich.

So fügen Sie Alternativtexte auf gängigen Plattformen hinzu

• WordPress: Wählen Sie den Bildblock aus und tragen Sie in der Seitenleiste „Alternativtext“ ein, oder bearbeiten Sie ihn einmalig in der Mediathek. Weitere Korrekturen finden Sie in unserer WordPress-Checkliste für Barrierefreiheit.
• Elementor: Legen Sie den Alternativtext in der Mediathek für das Bild fest; Elementor übernimmt ihn automatisch.
• Shopify: Öffnen Sie das Produkt, klicken Sie auf das Bild und wählen Sie „Alt-Text hinzufügen“.
• HTML: <img src="trail.jpg" alt="Wanderer auf einem Grat bei Sonnenaufgang">

Alternativtexte, SEO und KI-Suche

Suchmaschinen können Bilder nicht so sehen wie Menschen. Sie verlassen sich auf Alternativtexte und den umgebenden Inhalt, um sie zu verstehen. Aussagekräftige Alternativtexte helfen Ihren Bildern, in der Bildersuche zu erscheinen, und liefern Kontext für den Rest der Seite. KI-Assistenten, die Ihre Website lesen, um Fragen zu beantworten, profitieren von derselben Klarheit. Deshalb gehen Barrierefreiheit und SEO so oft Hand in Hand.

So beheben Sie Alternativtexte in großem Umfang

Auf einer Website mit Hunderten oder Tausenden Bildern ist es mühsam, Alternativtexte einzeln zu schreiben. Ein praxistauglicher Ablauf:

1. Scannen Sie Ihre Website, um jedes Bild mit fehlendem, leerem oder dateinamenbasiertem Alternativtext zu finden.
2. Kennzeichnen Sie dekorative Bilder, damit sie alt="" erhalten.
3. Lassen Sie für die übrigen Bilder per KI Beschreibungsentwürfe erstellen.
4. Lassen Sie die Entwürfe von einer Person auf Richtigkeit und Kontext prüfen, besonders bei Produktbildern und funktionalen Bildern.
5. Veröffentlichen Sie, und überwachen Sie neue Uploads, damit das Problem nicht zurückkehrt.

Häufig gestellte Fragen

Wie lang sollte ein Alternativtext sein?

Es gibt keine feste Grenze, aber streben Sie einen kurzen Satz oder weniger an. Braucht ein Bild eine ausführliche Erklärung, gehört sie in den Seitentext, und der Alternativtext bleibt knapp.

Braucht jedes Bild einen Alternativtext?

Jedes Bild braucht ein Alt-Attribut. Informative und funktionale Bilder brauchen eine Beschreibung; dekorative Bilder brauchen ein leeres Attribut, alt="".

Kann KI Alternativtexte für mich schreiben?

KI liefert schnell gute erste Entwürfe, weiß aber nicht, warum Sie ein Bild ausgewählt haben oder was ein Link bewirkt. Eine kurze Prüfung durch einen Menschen sorgt für ein korrektes Ergebnis.

Fehlende Alternativtexte automatisch finden und beheben

Reguweb scannt jede Seite auf fehlende und wenig hilfreiche Alternativtexte, erstellt KI-generierte Beschreibungen, die Sie mit einem Klick prüfen und freigeben können, und überwacht neue Inhalte laufend. Starten Sie einen kostenlosen Scan, um zu sehen, wie viele Bilder Ihrer Website Aufmerksamkeit brauchen, oder beginnen Sie eine 14-tägige kostenlose Testphase.