Was gute Alternativtexte ausmacht

So funktioniert es

Jedes Bild bekommt im Attribut alt einen Text, der es ersetzt:

<img src="team.jpg" alt="Unser Team vor dem Büro in Leipzig">

Ein Screenreader liest diesen Text anstelle des Bildes vor. Fehlt das Attribut, liest er den Dateinamen vor, etwa „IMG 4711 Punkt JPG“, oder übergeht das Bild. Den Text sehen auch alle, bei denen ein Bild nicht lädt. Suchmaschinen nutzen ihn, um zu verstehen, was ein Bild zeigt; Google wertet ihn für die Bildersuche aus und bei verlinkten Bildern wie einen Linktext.

WCAG 2.2 verlangt in Kriterium 1.1.1 für jeden Nicht-Text-Inhalt eine Textalternative, die denselben Zweck erfüllt.

Worauf es ankommt

• Den Zweck beschreiben, nicht die Pixel. Was soll das Bild hier vermitteln? Ein Produktfoto braucht Produkt und Variante, ein Diagramm seine Kernaussage.
• Schmuckbilder bekommen ein leeres alt. Bilder, die nur dekorieren, bekommen alt="". Dann überspringt der Screenreader sie. Fehlt alt ganz, ist das nicht dasselbe.
• Keine Füllwörter. „Bild“, „Foto“, „Grafik“ oder ein Dateiname sagen nichts. Auch „Bild von …“ am Anfang ist überflüssig, das sagt der Screenreader selbst.
• Bilder als Link oder Button beschreiben das Ziel oder die Aktion: Ein Logo, das zur Startseite führt, heißt „Startseite Beispiel GmbH“, nicht „Logo“.
• Text im Bild steht im alt. Ein Banner mit „20 % auf alles“ braucht genau diesen Text.
• Grafiken und SVG zählen mit. Ein <svg role="img"> bekommt ein <title> oder aria-label, ein <input type="image"> ein alt, Bereiche einer Image-Map (area) ebenso.
• Kein Keyword-Stapel. Für Suchmaschinen gilt dasselbe wie für Menschen: ein zutreffender Satz, keine Liste von Suchbegriffen.

So richtest du es ein

Alternativtexte pflegst du im CMS: In WordPress in der Mediathek beim Bild oder im Bild-Block unter „Alternativer Text“. Ein Text in der Mediathek gilt als Vorgabe für neue Einbindungen; derselbe Text passt aber nicht an jeder Stelle. Bilder aus dem Theme, etwa Logo und Icons, ändert, wer das Theme pflegt. Schmückende Icons neben einem Text bekommen dort alt="" oder bei SVG aria-hidden="true".