Mehr als nur das Visuelle: Bedeutungsvolle Alternativtexte gestalten

Zielgruppe im Blick behalten
Nutzer, die Bilder oder andere grafische Elemente nicht sehen können, sind auf eine alternative, textbasierte Beschreibung angewiesen, um den Inhalt oder Zweck dieser Objekte zu erfassen. Diese Alternativen müssen im Code mit dem Bild oder Objekt verknüpft sein, damit Hilfstechnologien wie Screenreader den Objekttyp (Bild, Icon, Grafik, Schaltfläche etc.) und dessen Beschreibung richtig ausgeben können.

Alt-Text und Accessible Name
Üblicherweise wird Textalternative mit „Alt-Text“ in Verbindung gebracht, also dem alt-Attribut im <img>-Tag, zum Beispiel:

<img alt="Zur Startseite navigieren" src="/assets/svg/crownpeak-logo.svg">

Eine umfassendere Perspektive auf dieses Thema wird als "Accessible Name" bezeichnet. Dabei wird betont, dass alle Objekte, nicht nur Bilder, einen barrierefreien Namen haben müssen. Dazu gehört auch die Verwendung von ARIA-Attributen wie aria-label oder aria-labelledby, da das Alt-Attribut nicht universell verfügbar ist.

Best Practice:

Der Alternativtext sollte prägnant und klar sein – genug, um die Idee zu vermitteln, ohne unnötige Details zu liefern.
Lange galt: Da blinde Menschen Bilder nicht sehen können, sollten sie nicht mit irrelevanten Beschreibungen belastet werden – es sei denn, das Bild vermittelt wichtige oder ergänzende Informationen. Diese Haltung führte dazu, dass viele Bilder als dekorativ gekennzeichnet wurden. Doch dieser Trend ändert sich.

Mehr Alternativtext statt weniger?

Moderne Technologien sind sehr visuell geprägt. Oft unterstreichen Grafiken die Aussagen von Texten – mit spürbarem Mehrwert in Bereichen wie:

• Marketing: Markenbekanntheit und Wiedererkennung werden durch Alt-Texte gestärkt.
• Bildung: Konzepte durch Wiederholung besser verstehen, eine bewährte Lernmethode.
• Diversität und Inklusion: Subtile visuelle Botschaften zur Inklusion können auch verbal transportiert werden.

Zudem nutzen heute nicht nur blinde Menschen Screenreader. Auch Personen mit Sehschwächen, kognitiven Einschränkungen, motorischen Behinderungen oder Sprachbarrieren profitieren davon.
Für diese Nutzer kann es frustrierend sein, ein Bild zu sehen (oder zu erahnen), aber keine Beschreibung dazu zu hören – insbesondere beim schnellen Navigieren per Tastatur.

Wenn keine Barrierefreiheit berücksichtigt wurde (kein Alt-Text, kein aria-Attribut, keine Deklaration als dekorativ), liest der Screenreader oft den Bildpfad oder Dateinamen vor – ein schlechtes Nutzererlebnis.

Blindheit ist ein Spektrum

Ein weiterer Aspekt: Menschen, die erst im Laufe ihres Lebens erblindet sind, können auf visuelle Erfahrungen zurückgreifen – etwa das Wissen, warum entfernte Objekte kleiner wirken.
Diese Menschen könnten es sehr schätzen, wenn ästhetische Details eines Bildes beschrieben werden, selbst wenn diese Informationen für das Textverständnis nicht zwingend erforderlich sind.

Auch die alternde Bevölkerung wird erwarten, dass Inhalte über Screenreader ein „reicheres“ Erlebnis bieten – basierend auf ihrem früheren Seheindruck.

Die Herausforderung für Tester

Barrierefreiheitstester sollen prüfen:
Würde der Verlust des Bildes wichtige Informationen entfernen?

Aber: Was ist „wichtig“ – und für wen?
Die Interpretation von WCAG 1.1.1 (Nicht-Text-Inhalte) ist situationsabhängig. Entscheidend ist, die eigene Zielgruppe zu kennen – und konsistent zu handeln.

W3C-Definitionen für Bilder

Das W3C bietet klare Leitlinien für Alternativtexte je nach Bildtyp:

• Informationsgrafiken
  Bilder, die Konzepte oder Informationen vermitteln (Fotos, Illustrationen). Kurzbeschreibung erforderlich.
• Dekorative Bilder
  Wenn Bilder nur optische Akzente setzen, sollte ein leeres alt="" verwendet werden.
• Funktionale Bilder
  Icons und Schaltflächen benötigen eine Beschreibung ihrer Funktion (z.B. „Formular absenden“).
• Bilder mit Text
  Wenn lesbarer Text in einem Bild enthalten ist (außer Logos), sollte dieser auch im Alternativtext erscheinen.
• Komplexe Bilder
  Diagramme oder Grafiken erfordern eine ausführliche Textbeschreibung – entweder auf derselben Seite oder auf einer verlinkten separaten Seite.
• Bildgruppen
  Wenn mehrere Bilder zusammen eine Information vermitteln, sollte ein Bild die gesamte Aussage beschreiben.
• Imagemaps
  Der Alt-Text sollte den Zweck der gesamten Karte erläutern. Einzelne klickbare Bereiche brauchen jeweils eigene Beschreibungen.

*Weitere Informationen zu komplexen Bildern

Komplexe Bilder wie Grafiken, Diagramme oder Schemata können zu viele Informationen enthalten, um mit alternativen Textmethoden wie dem Alt-Attribut oder der ARIA-Label-Attribut effektiv beschrieben zu werden. Stattdessen sollten detaillierte Beschreibungen dieser Bilder an anderer Stelle (z. B. auf derselben Seite oder auf einer separaten Seite) bereitgestellt werden.

Dies kann Text sein, der die wichtigsten Elemente des Bildes beschreibt, oder strukturierte Daten, die mithilfe von Überschriften, Listen und Tabellen organisiert sind und von den Benutzern erkundet werden können. Dies kann für alle Benutzer hilfreich sein, nicht nur für diejenigen, die das Bild nicht sehen können. Berücksichtigen Sie dies, wenn Sie entscheiden, wo Sie die Bildbeschreibung platzieren möchten.

Das National Center for Accessible Media (NCAM) hat Richtlinien zur Beschreibung komplexer Bilder sowie eine Vielzahl von Beispielen entwickelt. Diese sind in den "Effective Practices for Describing STEM Images" (Bewährte Verfahren zur Beschreibung von MINT-Bildern ) verfügbar. Eine weitere hervorragende Quelle mit zusätzlichen Beispielen ist "Describing Figures" (Beschreibung von Abbildungen ), ein Leitfaden der ACM Special Interest Group on Accessible Computing (SIGACCESS).

Die Ergebnisse der WebAIM-Umfrage unter Screenreader-Nutzern sind ein gutes Beispiel für die Darstellung von Daten in verschiedenen Formaten (Grafiken, Tabellen und Textbeschreibungen). Dies ist ein Beispiel für universelles Design, bei dem Ideen mit verschiedenen Mitteln vermittelt werden, da Menschen komplexe Informationen auf sehr unterschiedliche Weise verarbeiten.