Zum Hauptinhalt springen
Alternativtext
Daniel Towers avatar
Verfasst von Daniel Towers
Vor über 2 Wochen aktualisiert

Alternativtext (manchmal fälschlicherweise als „Alt-Tags“ bezeichnet) ist Text, der dazu gedacht ist, etwas zu beschreiben – typischerweise Bilder, Audio und Video – für Personen, die nur Text lesen können. Typischerweise umfasst dies:

  • Benutzer mit Sehbehinderungen, deren Webseiten von einem Screenreader vorgelesen werden.

  • Suchmaschinen wie Google.

Insbesondere, weil Suchmaschinen Bilder, Audio und Video nicht wie Menschen verstehen können, sind sie nicht in der Lage, Inhalte ohne „alternative“ Texte zu indizieren oder zu finden. Das Hinzufügen von Alternativtext ist daher eine gute SEO-Praxis und unerlässlich für die Barrierefreiheit.

Wie es codiert wird

<img src="image.png" alt="Das ist Alternativtext">

Best Practices

Immer wenn Bilder, Audio und Video im Web verwendet werden, sollten Sie überlegen, ob diese Inhalte für das Verständnis der Seite wichtig oder rein dekorativ sind.

Zum Beispiel: Ein kleines Symbol, das neben einem Menülink angezeigt wird und allein keine zusätzlichen nützlichen Informationen liefert, würde als dekorativ angesehen. In solchen Fällen sollte der Alternativtext explizit auf leer gesetzt werden (manchmal als „Null-Alt-Text“ bezeichnet) mit diesem Code: <img alt="">. Dies teilt Screenreadern mit, dass es nicht erwähnt werden soll.

Wenn das Medium nicht dekorativ ist, sollten Sie einen angemessenen Alternativtext bereitstellen.

Betrachten Sie das folgende Bild:

Ein Bild wie dieses sollte einen Alternativtext wie „Zwei Äpfel, einer in der Mitte aufgeschnitten“ haben.

Alternativtext muss nicht jede Instanz von Medien im Detail erklären. Von Wikipedia:

Das alt-Attribut muss nicht immer wörtlich den Inhalt des Bildes beschreiben. Denken Sie an den Zweck und den Kontext des Bildes und daran, was für jemanden, der es nicht sehen kann, nützlich wäre. Das alt-Attribut sollte eine Alternative für das Bild sein und üblicherweise dessen Zweck angeben. Zum Beispiel sollte ein Bild eines Warnschildes keinen Alternativtext wie ‚ein Dreieck mit gelbem Hintergrund, schwarzem Rand und einem Ausrufezeichen‘ haben, sondern einfach ‚Warnung!‘ – es sei denn, der Zweck des Alt-Textes besteht darin, zu zeigen, wie das Warnsymbol tatsächlich aussieht.

Das Weglassen des alt-Attributs ist niemals akzeptabel. Wenn dies geschieht, sprechen viele Screenreader stattdessen den Dateinamen des Bildes aus, was für Benutzer eine schreckliche Erfahrung darstellt.

Weiterführende Informationen

Hat dies deine Frage beantwortet?