Die Verwendung des Alt-Attributes für Bilder in HTML

Um die Digitale Barrierefreiheit auf Webseiten sicherzustellen, müssen auch Alternativtexte beim Einsatz von Bildern und Graphiken vorliegen. "Fehlende Alternativtexte" wurde als eine der häufigsten Barrieren vom dzb lesen im Rahmen unseres Digitalen Frühstücks vorgestellt. Allerdings gelten unterschiedliche Regelungen im Umgang mit Alternativtexten. Grundsätzlich lassen sich zwei Funktionsarten von Bildern unterscheiden. 

  • Dekorative Bilder vermitteln keine Informationen, bspw. weil die Informationen bereits im Text zu finden sind oder weil sie "nur" als ästhetisches Mittel eingesetzt werden. 
  • Informative Bilder hingegen transportieren zusätzliche Informationen, die nicht im Text enthalten sind. Hier kann es sich um Diagramme handeln, aber auch Bilder, die eine Schaltfläche darstellen. Z. B. ein Such-Icon, dargestellt in Form einer Lupe. 

Wenn es sich um ein "rein" dekoratives Bild handelt, reicht es aus, entsprechend einen NULL-Text (leer) anzugeben. Im Sinne der HTML-Codierung wäre dies alt="", damit es von Hilfstechnologien, wie z. B. Sprachausgaben, ignoriert werden kann. In den meisten Content-Management-Systemen sind allerdings beschreibbare Felder für Alt-Texte verfügbar, sprich es muss keine HTML Codierung angewendet werden. In diesem Fall, bleibt das Feld für den Alt-Text einfach leer. 

Um die Entscheidung für Redakteure zu erleichtern, wie das Alt-Attribut in ihrem Szenario korrekt angewendet werden sollte, existiert ein Entscheidungsbaum des World Wide Web Consortium (W3C). Diesen können Sie hier abrufen.  Er führt durch unterschiedliche Bewertungsszenarien und soll Redakteure bei der Entscheidung unterstützen,  wie sie mit dem Alt-Attribut in ihrem Kontext verfahren sollten.  

Und es gibt weitere Inspirationen zum Thema:

Hinweis: Natürlich kommen Alternativtexte nicht nur bei Webseiten oder Apps zum Einsatz, sondern spielen auch beim Thema barrierefreie Dokumente eine zentrale Rolle.