Alternative Texte (auch »Alt-Texte« genannt) sind textuelle Beschreibungen für visuelle Elemente wie Bilder, Grafiken und Icons. Sie ermöglichen Menschen mit Sehbeeinträchtigungen durch Screenreader den Zugang zu Informationen und dienen außerdem als Fallback, wenn Bilder nicht geladen werden können. Anstelle des Bildes erscheint in diesen Fällen der alternative Text.
Der alternative Text soll die wesentlichen Informationen des Bildes vermitteln, abhängig vom Nutzungskontext und der Zielgruppe. Dabei ist es zuerst wichtig zu prüfen, ob das Bild rein dekorativ ist oder zur inhaltlichen Aussage der Seite beiträgt. Rein dekorative Bilder brauchen keinen alternativen Text. In anderen Fällen muss der alternative Text verständlich, prägnant und in den inhaltlichen Zusammenhang der Seite eingebettet sein.
Technische Umsetzung:
Alt-Attribut eines Bilds:
<img src="beispiel.jpg" alt="Beschreibung des Bildes">Bei einem rein dekorativen Bild:
<img src="deko.jpg" alt="">SVG-Dateien:
<title>und<desc>ElementeCSS-Hintergrundbilder: aria-label (wenn relevant)
Es gibt unterschiedliche Empfehlungen zur Länge von alternativen Texten. Eine wichtige Regel ist, die kontextrelevanten Details so kurz möglich wiederzugeben. Idealerweise erfolgt das unter 140 Zeichen, da unnötig lange alternative Texte mit dem Screenreader auch stören können.
