BFSG: Was ist der richtige Alt-Text für welche Bilder?

Durch das 2025 in Kraft tretende Barrierefreiheitsstärkungsgesetz (BFSG) geraten derzeit wieder einmal die Regeln für barrierefreie Webgestaltung in den Focus der Aufmerksamkeit. Eine der typischen Anforderungen für eine zugänglichere Gestaltung des Webauftritts ist dabei, Medien wie Bilder oder Videos mit aussagekräftigen Alt-Texten auszugeben. So können die Bildinhalte dann von Screenreadern oder Braille-Zeilen für Blinde oder sehbehinderte Personen wiedergegeben werden. 

Alt-Text ist die Abkürzung bzw. englische Bezeichnung für einen Alternativtext, der anstelle eines audiovisuellen Mediums angezeigt werden kann.  Der Text soll das Dargestellte beschreiben und so ausführlich wie nötig wiedergeben. Im Sourcecode einer Webseite wird der Alt-Text als Attribut im HTML-Image-Tag oder Media-Tag ausgegeben und ist so direkt mit dem beschriebenen Medium verknüpft.

Allerdings können dabei nicht alle Bilder über einen Kamm geschoren werden: Verschiedene Bilddtypen verlangen nach unterschiedlich ausgeführter Betextung im Alt-Attribut. Wir haben hier eine Liste von häufigen Alt-Text-Bildtypen als den WAI-Empfehlungen zusammengestellt.
 

Als Bilder noch die Ausnahme waren

Ältere werden sich vielleicht erinnern, dass in der Frühzeit des World-Wide-Web, als Seiten in der Regeln noch mit dem Editor handgeschrieben wurden,  die Inhalte noch sehr stark textlastig ausfielen. Bilder kamen erst mit der HTML Version 2.0 (ab 1995) ins Spiel. Schon damals wurde das Alt-Attribut mitgegeben. Zu dieser Zeit sollte damit allerdings eher der Fall abgedeckt werden, dass ein Bild in einer reinen Textkonsole oder über eine langsame Internet-Verbindung gar nicht angezeigt werden konnte. 

Missbrauch durch Layout-Orientierung

Als die verfügbaren Bandbreiten anwuchsen konnte das Web zunehmend mit attraktiven Bildern illustriert werden. Dabei wurden viele Bilder noch zu reinen Design-Zwecken eingesetzt. Ein beliebter Sündenfall in dieser Zeit war die Darstellung von Rahmen mit runden Ecken über Tabellenlayouts. Bilder dieser Art trugen keinerlei Bedeutung und wurden daher oft auch gar nicht erst mit Alt-Texten versehen.

Ein anderes Usability-Verbrechen war die Unart, Überschriften in ausgefallenen Schriftarten als Bild einzubinden und Formular-Buttons im 3D-Look als Grafik zu bauen. Bei dieser Art von sinntragenden Bildern war es unabdingbar, den im Bild dargestellten Text im Alt-Text zu wiederholen, da die Seiten ohne Bilder komplett unbenutzbar wurden.

Missbrauch durch SEOs

Mit zunehmender Bedeutung der Suchmaschinen begann ein dunkleres Kapitel des Alt-Text. Findige SEOs hatten entdeckt, dass sich einfache Ranking-Algoritmen durch möglichst häufige Wiederholung der Suchworte auf einer Seite manipulieren ließen. Daher wurde der Alt-Text vieler Bilder oft als Ablage für zusammenhangslose SEO-Keywords missbraucht. Diese “falschen” Alternativtexte findet man noch oft im Altbestand von Content-Portalen. 

Die Web Accessibility Initiative (WAI)  des W3C setzt Standards für die verbesserte Zugänglichkeit von Webseiten fest. 
 

Zum Thema Alternativtexte für Bilder fordert die WAI:

 
Bilder müssen mit Textalternativen versehen sein, die die durch sie dargestellte Information oder Funktion beschreiben. Dadurch wird sichergestellt, dass Bilder von Menschen mit verschiedenen Behinderungen genutzt werden können. 

Das Problem für den Redakteur ist dabei, dass erkannt werden muss, um welchen Typ Bild es sich handelt und wieviel Textinformation im Kontext der Seiteninhalte für das Bild benötigt wird. 

Empfehlung sinnvoller Alt-Text:

Der alternativ angebotene Text sollte relativ umfangreich sein und alle Aspekte des Gezeigten erläutern. 
 

Prinzipiell gibt es kein offizielles Limit für Anzahl der Zeichen in einem Alt-Text-Attribut. Das liegt nicht zuletzt darin begründet, dass je nach verwendeter Sprache das Verhältnis von Zeichen zu Silbenzahl in der gesprochenen Sprache stark variieren kann. 

Häufig wird eine Obergrenze von ca. 100 bis 150 Zeichen empfohlen. (Bei mehr als 150 Zeichen beginnen wohl einige Screenreader, den Inhalt zu stückeln.) 

Komplexe Bilder erfordern in der Regel Beschreibungen, die über diese empfohlene Länge für Attribute hinausgehen. Hier sollte die Redaktion dann darüber nachdenken, die Langbeschreibung des Bildes zusätzlich (und im sichtbaren Bereich der Seite) zu veröffentlichen. 
 

Mögliche Platzierungen einer ausführlichen Langbeschreibung
 

• Link auf eine separate Seite oder ein Modalfenster mit der Langbeschreibung unterhalb des Bildes oder zusätzlich innerhalb eines longdesc-Attributes verlinkt (longdesc ist seit HTML5 nicht mehr offiziell Bestandteil der Spezifikation)
• Verweis mit dem Attribut aria-describedby="description" (Die Description dann mit der entsprechenden ID kennzeichnen.)
• Platzierung unter dem Bild innerhalb des HTML-Tags <figure> mit <figcaption>
• Verweis auf die Platzierung der Langbeschreibung innerhalb des Alt-Textes ("Venn-Diagramm - Die ausführliche Beschreibung finden Sie als Fußnote unter dem Artikel")

Für viele Website-Besitzer steht jetzt die Aufgabe an, die eigene Website für das BFSG fit zu machen. Allerdings heisst es dann in relativ kurzer Zeit eine Unmenge alter Bilder mit sinnvollen Alt-Texten zu bestücken.

Potenzielle Unterstützung kann dabei von einer KI kommen. MFD hat zum Beispiel eine Extension für das CMS TYPO3 entwickelt, die mit der Hilfe von OpenAI / ChatGPT Alt-Texte automatisch generieren kann.

• TYPO3 Extension AI-Filemetadata

Die Extension wird noch weiterentwickelt und verfeinert, kann aber auch nach der Installation Redakteuren bereits viel der lästigen Routinearbeit bei der Alt-Text-Generierung abnehmen.