Was ist ein Alt-Text?
Der Alt-Text ist eine kurze Beschreibung eines Bildes im alt-Attribut des HTML-Elements img. Screenreader lesen ihn blinden und sehbehinderten Menschen vor, und er springt ein, wenn ein Bild nicht geladen wird. Google nutzt ihn gemeinsam mit Bilderkennung und dem umgebenden Text, um zu verstehen, was ein Bild zeigt.
So sieht ein Alt-Text im Code aus
Der Alt-Text steht direkt im Bild-Element. In WordPress tragen Sie ihn in der Mediathek im Feld „Alternativer Text“ ein. Ein Beispiel für ein Foto des Stephansdoms in vier Varianten:
| Variante | Code | Bewertung |
|---|---|---|
| Fehlt | <img src="dom.jpg"> | Screenreader und Google erfahren nichts über das Bild. |
| Keyword-Liste | alt="Wien, Stephansdom, Wien Sehenswürdigkeit, Dom Wien" | Schlechte Nutzererfahrung, kann als Spam gewertet werden. |
| Knapp | alt="Stephansdom" | Besser, aber ohne Zusammenhang. |
| Beschreibend | alt="Südturm des Stephansdoms in Wien im Abendlicht" | Konkret, verständlich, passt zum Inhalt. |
Welches Bild welchen Alt-Text braucht
Nicht jedes Bild braucht eine Beschreibung. Die Web Accessibility Initiative des W3C unterscheidet mehrere Fälle:
- Dekorative Bilder, etwa Hintergründe oder Zierlinien, erhalten ein leeres Attribut: alt="". So überspringen Screenreader sie.
- Funktionale Bilder wie verlinkte Logos oder Icon-Buttons beschreiben die Funktion oder das Linkziel, zum Beispiel „Zur Startseite“. Bei einem verlinkten Bild dient der Alt-Text auch Google als Ankertext.
- Informative Bilder bekommen eine kurze Beschreibung dessen, was sie im Zusammenhang aussagen.
- Bilder mit Text enthalten diesen Text im Alt-Attribut, sofern er nicht ohnehin auf der Seite steht.
- Komplexe Grafiken wie Diagramme erhalten einen kurzen Alt-Text. Die vollständigen Daten gehören in den Fließtext oder eine Tabelle.
Was Google zu Alt-Texten empfiehlt
Google bezeichnet das alt-Attribut als das wichtigste Merkmal, um Bilder mit Informationen zu versehen. Empfohlen werden aussagekräftige Texte, die zum Inhalt der Seite passen und Suchbegriffe dort verwenden, wo sie natürlich hineinpassen. Daneben helfen kurze, beschreibende Dateinamen statt Namen wie IMG00023.jpg und Bilder, die in der Nähe des passenden Textes stehen. Für Inline-SVG-Grafiken nutzen Sie statt alt ein title-Element innerhalb der Grafik.
Auf jeder Leistungsseite von promeseo.com steht ein Profilfoto von Daniel Marina. Der Alt-Text beschreibt jeweils, wer zu sehen ist, und ergänzt die Rolle passend zur Seite: auf /seo-optimierung-wien/ „Experte für SEO Optimierung in Wien“, auf /google-ads-wien/ „Google Ads Experte in Wien“. So enthält jeder Alt-Text genau ein passendes Thema statt einer Liste von Suchbegriffen und bleibt für Screenreader eine sinnvolle Beschreibung des Bildes.
Häufige Fragen
Ist der Alt-Text ein Rankingfaktor?
Google nutzt den Alt-Text, um zu verstehen, was ein Bild zeigt, und nennt ihn das wichtigste Attribut für Bildinformationen. Vor allem in der Google-Bildersuche spielt er daher eine Rolle. Ein Ranking garantiert er nicht, ein fehlender Alt-Text verschenkt aber Kontext.
Brauchen dekorative Bilder einen Alt-Text?
Sie brauchen ein alt-Attribut, aber ein leeres: alt="". Damit erkennen Screenreader, dass das Bild nur zur Gestaltung dient, und überspringen es.
Wie lang darf ein Alt-Text sein?
Eine feste Grenze nennt Google nicht. Bewährt hat sich ein kurzer, präziser Satz, der beschreibt, was im Zusammenhang wichtig ist. Ausführliche Informationen, etwa die Werte eines Diagramms, gehören besser in den Text der Seite.