Alt-Text-Beispiele: Was du für jede Bildart schreibst

Alt-Text-Beispiele

Alt-Text-Beispiele: gut und schlecht, nach Bildart | We.Inc

Was Alt-Text bedeutet, gute und schlechte Alt-Text-Beispiele für Logos, Produkte, Icons, Diagramme und dekorative Bilder, die W3C-Entscheidungsschritte und ein kurzes Übungsquiz.

Alt-Text ist der kurze schriftliche Ersatz für ein Bild und steht im alt-Attribut eines img-Tags. Screenreader lesen ihn vor, und Browser zeigen ihn an, wenn das Bild nicht lädt. Guter Alt-Text sagt, was das Bild an seiner Stelle auf der Seite bedeutet; dekorative Bilder bekommen ein leeres alt.

Schnelle Beispiele nach Bildart

Bild
Schwaches alt
Besseres alt

Logo mit Link zur Startseite
Smith Roofing Startseite

Produktfoto
Braune Ledertasche mit Messingschnalle

Such-Icon-Button
Lupe
Suchen

Trennlinien-Schnörkel
dekorativer Schnörkel
(leer: alt="")

Foto des Teams
Unsere vier Dachdecker vor dem Werkstattwagen

Umsatzdiagramm
Umsatz nach Monat, Details in der Tabelle unten

Die richtigen Worte hängen davon ab, warum das Bild da ist, nicht davon, wie es aussieht. Eine Lupe in einem Button bedeutet Suchen; dieselbe Form als Seitendekoration bedeutet gar nichts. Probier die Übungsfragen aus und übernimm dann die Muster für deinen eigenen Shop oder deine Website.

Lies die Situation auf jeder Übungskarte: was das Bild zeigt und wo es auf der Seite steht.
Wähle aus den drei Optionen den Alt-Text, den du schreiben würdest.
Die Karte zeigt dir, ob deine Wahl funktioniert und welcher Schritt des W3C-Entscheidungsbaums greift.
Nutze die Beispieltabelle unten als Nachschlagewerk, wenn du Bilder zu deinen eigenen Seiten hinzufügst.

Verzichte auf Wörter wie Bild von oder Foto von. Screenreader sagen bereits an, dass es sich um ein Bild handelt.
Nenne bei Produktfotos die Details, nach denen Kunden fragen würden: Farbe, Material, was diese Variante unterscheidet.
Steht dieselbe Information direkt neben dem Bild als Text, vermeidet ein leeres alt, dass sie doppelt vorgelesen wird.
Stopfe niemals Keywords hinein. Google warnt, dass mit Keywords gefüllte alt-Attribute dazu führen können, dass deine Website als Spam eingestuft wird.

Häufige Fragen

Was bedeutet alt bei Text?

Alt ist die Abkürzung für alternative, also Alternative. Alt-Text ist der Alternativtext für ein Bild: die Worte, die ein Screenreader spricht, und das, was der Browser anstelle eines Bildes anzeigt, das nicht laden kann. Er steht im alt-Attribut des img-Elements.

Braucht jedes Bild einen Alt-Text?

Jedes img sollte ein alt-Attribut haben, aber nicht jedes braucht Worte. MDN erklärt, dass ein leeres alt ein Bild als keinen wesentlichen Teil des Inhalts kennzeichnet. alt ganz wegzulassen ist schlimmer: Manche Screenreader lesen dann den Dateinamen vor.

Wie lang sollte ein Alt-Text sein?

Bei den meisten Bildern kurz genug, um ihn in einem Atemzug zu sagen. Der W3C-Baum verlangt für einfache Fotos eine knappe Beschreibung. Diagramme und Schaubilder sind die Ausnahme: Gib im alt eine kurze Bezeichnung an und stelle die vollständigen Informationen als Text auf die Seite.

Hilft Alt-Text bei der SEO?

Ja. Googles Leitfaden zu Bildern sagt, dass Google Alt-Text zusammen mit Computer Vision und dem Seiteninhalt nutzt, um Bilder zu verstehen. Das eigene Beispiel bevorzugt Dalmatian puppy playing fetch gegenüber einem bloßen puppy und warnt vor Keyword-Listen.

Welchen Alt-Text sollte ein Logo haben?

Wenn das Logo auf deine Startseite verlinkt, sollte das alt beschreiben, wohin der Link führt, etwa dein Firmenname plus Startseite. Wird es nur angezeigt und steht dein Name bereits als Text daneben, ist ein leeres alt in Ordnung.

Der W3C-Entscheidungsbaum in einfachen Worten

Erstens: Enthält das Bild Text? Steht dieser Text auch in der Nähe als echter Text, nutze ein leeres alt; wenn nicht, schreib den Text ins alt. Als Nächstes: Steckt es in einem Link oder Button? Dann beschreib, wohin der Link führt oder was der Button tut.
Trägt es Bedeutung bei? Gib einfachen Fotos eine knappe Beschreibung, und stelle bei Diagrammen die Daten an anderer Stelle auf die Seite. Ist es reine Dekoration? Nutze ein leeres alt.

Alt-Text für Onlineshops

Kunden mit Screenreader verlassen sich auf den Alt-Text von Produktbildern so, wie andere auf das Hineinzoomen. Hat ein Produkt mehrere Fotos, gib jedem ein eigenes alt: Vorderansicht, Detail der Gesäßtasche, getragen von einem 170 cm großen Model.

Weitere Beispiele für Shop- und Firmenwebsites

Alt-Text-Beispiele für typische Firmenbilder

Wo das Bild steht
Beispiel-Alt-Text
Warum

Hero-Foto eines Café-Innenraums
Sonnige Café-Theke mit frischem Gebäck in der Auslage
Setzt die Szene in wenigen Worten

Porträtfoto auf einer Über-uns-Seite
Dr. Amira Khan, leitende Zahnärztin
Name und Rolle, nicht die Haarfarbe

Social-Icon mit Link zu Instagram
Harbour Bakery auf Instagram
Beschreibt das Linkziel

Karten-Screenshot mit deiner Adresse daneben
(leer: alt="")
Die Adresse steht bereits als Text daneben

Vorher-nachher-Foto eines reparierten Dachs
Dach vor der Reparatur, mit fehlenden Ziegeln am First
Sagt, was sich zwischen den Fotos ändert

Zertifikats-Badge
Zertifiziert vom regionalen Handwerksrat
Sagt, was das Badge zertifiziert

Codebeispiele

Drei häufige Fälle in HTML

Ein verlinktes Logo, ein Produktfoto und ein dekoratives Bild. Beachte, dass das dekorative Bild trotzdem ein alt-Attribut hat, nur eben leer.

Ein Diagramm mit seinen Daten als Text

Das alt benennt das Diagramm und verweist auf die Details, die in einer Bildunterschrift stehen, die alle Besucher lesen können.

Übung: Wähle den besten Alt-Text

{n} von {v} richtig beantwortet.

Richtig.

Nicht ganz. Die beste Antwort ist: {v}.

Neu starten

Alt-Text-Optionen

Dein Logo steht im Header und verlinkt auf die Startseite. Dein Firmenname steht sonst nirgends im Header.

Harbour Bakery Startseite
Unser schönes Logo in Blau

Ein verlinktes Bild braucht einen Alt-Text, der sagt, wohin der Link führt.

Eine dünne Wellenlinie trennt zwei Abschnitte. Sie liefert keine Information.

Wellenlinie
Trennbild
Ein leeres alt (alt="")

Rein dekorative Bilder bekommen ein leeres alt, damit Screenreader sie überspringen.

Das Hauptfoto auf einer Produktseite für eine Tasse, die es in drei Farben gibt. Das hier ist die salbeigrüne.

Salbeigrüne Steinguttasse mit geschwungenem Henkel
Tasse Tasse Kaffeetasse beste Tasse Geschenk
Produktfoto

Eine knappe Beschreibung mit den Details, die diese Variante unterscheiden. Keyword-Listen sind Spam.

Ein Button, der nur ein Warenkorb-Icon zeigt, öffnet den Warenkorb.

Einkaufswagen-Icon
Warenkorb anzeigen

Beschreibe bei einem Bild in einem Button die Aktion, nicht die Zeichnung.

Ein Bannerbild mit den Worten Kostenlose Lieferung dieses Wochenende. Dieselben Worte stehen nicht als Text auf der Seite.

Alt-Text-Beispiele: Was du für jede Bildart schreibst