Alternativtexte schreiben

1. Übung

Überprüfen Sie am besten in einem Ihrer digitalen Bildungs- und Informationsmaterialien:

1. Wurden konsequent Alternativtexte hinterlegt? Wurden rein dekorative Elemente als solche gekennzeichnet?
2. Welche Qualität haben die hinterlegten Alternativtexte?

Auf den nachfolgenden Seiten finden Sie grundlegende Hinweise und Qualitätskriterien für Alternativtexte zum Nachlesen.

Alternativ können Sie in diesem kurzen Quiz Ihr Wissen testen:

2. Einstieg

Was sind Alternativtexte?

Alternativtexte beschreiben den Inhalt oder die Funktion einer visuellen Darstellung.

Sie gewährleisten, dass Menschen mit Sehbeeinträchtigungen/Blindheit die Informationen bekommen, die zum Verständnis des Bildes im Kontext des digitalen Materials notwendig sind.

Die Texte werden nur von Sprachausagabe-Software (Screenreader) erkannt und vorgelesen. Sie sind nicht sichtbar.

Welche Bilder brauchen Alternativtexte?

Alle Inhaltstragenden "Nicht-Textelemente" in digitalen Anwendungen und Materialien.

Nach WCAG 2.1 werden folgende Arten von Bildern unterschieden:

• Informative Bilder
• Funktionale Bilder
• Schriftgrafiken, Bilder mit Text
• Bildergruppen
• Dekorative Bilder
• Komplexe Bilder
• Imagemaps

Nach: Leitfaden zur Erstellung von Alternativtexten im Bildungskontext. Kathrin Schilbach, Anne Haage (Kompetenzzentrum digitale Barrierefreiheit.nrw, Technische Universität Dortmund), CC BY 4.0. 

3. Alternativtexte hinterlegen

In Moodle-Kursen

In H5P

Sobald Sie ein Bild in ein H5P-Inhaltselement einfügen, wird Ihnen ein separates Feld "Alternativtext" angezeigt sowie der Hinweis, dass es sich hierbei um ein Pflichtfeld handelt.

In Microsoft Office Word

In LibreImpress Writer

In InDesign

Rechtsklick auf das Objekt > "Objektexporteigenschaften" 

Dort im Feld "Alternativtext" im Dropdown-Menü die Quelle für den Alternativtext auswählen. Ist dieser nicht in den Metadaten eingepflegt "Benutzerdefiniert" auswählen und den Texte eintragen.

Für den Export als PDF den Text zusätzlich unter "PDF mit Tags" > "Quelle für tatsächlichen Text" > "Benutzerdefiniert" eintragen.

Bei rein dekorativen Elementen im Dropdown-Menü "Dekoratives Bild (kein Alternativtext)" auswählen.

4. Allgemeine Regeln für Alternativtexte

Grundregeln

Kurz und prägnant: So wenig Text wie möglich, so viele Infos wie nötig. Nicht unbedingt ganze Sätze.

• Bildtyp angeben (Foto, Gemälde, Diagramm etc.)
• Kurze, objektive Beschreibung dessen, was man sieht, ohne Interpretation.
• Fachbegriffe nennen
• Text im Bild mit aufnehmen und in Anführungszeichen setzen
• Formulierungen wie "Im Bild zu sehen" oder "In der Grafik wird dargestellt" vermeiden
• Copyright Vermerk, wenn vorhanden und nicht bereits in Bildunterschrift

Beschreiben statt interpretieren

• Beschreiben, was man sieht: Aussehen/Gestalt und Handlungen anstatt Gefühle oder mögliche Absichten.
• Nicht interpretieren oder analysieren. Nutzende müssen eigene Schlüsse ziehen können.
• Keine unbequemen oder kontroversen Inhalte vorenthalten.

4 Faustregeln für Alternativtexte

Abbildungskontext beachten

Den Kontext beachten, in dem die Abbildung steht. Die Informationen aus begleitendem Text und/oder der Bildunterschrift können vorausgesetzt werden. Entscheiden, ob die Beschreibung so komplex ist, dass sie nicht als Alt-Text, sondern besser in einem verlinkten Dokument zur Verfügung gestellt werden sollte. 

Allgemeine Perspektive

In einem ersten Satz knapp die Informationen geben, die gebraucht werden, um einen ersten Eindruck von der Abbildung zu bekommen bzw. die Abbildung einordnen zu können, also den Kontext nennen, den Abbildungstyp und die Struktur des Bildes. 

Fachliche Perspektive

Im Weiteren eine kurze, aber präzise und objektive Beschreibung der Abbildung geben und dabei einen Fokus auf die Details legen, die zum Verständnis des Lerngegenstandes benötigt werden. Fachtermini verwenden. Aus der Abbildung übernommene Begriffe in Anführungszeichen setzen.

Didaktische Perspektive

Prüfen, ob die Beschreibung alle wichtigen Informationen für den Lernprozess bzw. die Lösung der Aufgabe enthält, jedoch nicht den Lernprozess selbst vorwegnimmt. Überlegen Sie, welche Beschreibungen nötig sind, damit sehende und nicht-sehende Teilnehmer*innen gemeinsam über das Bild reden können und verstehen, was gemeint ist.

Nach: Leitfaden zur Erstellung von Alternativtexten im Bildungskontext. Kathrin Schilbach, Anne Haage (Kompetenzzentrum digitale Barrierefreiheit.nrw, Technische Universität Dortmund), CC BY 4.0. 

5. Informative Bilder

Der Großteil genutzter Bilder entspricht der Kategorie der informativen Bilder. Diese sind eigenständige Informationsträger, die meist die Aussage eines Textes illustrieren. Somit sollte die Textalternative eine kurze Beschreibung sein, die die wesentlichen Inhalte des Bildes beschreibt.

1. Symbole als Label: z. B. Mail, Telefon, Bildformat – das Wort reicht aus
2. Bilder illustrieren die Aussage des Textes: Jeder Text, der von einem Screenreader vorgelesen werden kann, sollte im Alternativtext nicht wiederholt werden.
3. Gleichberechtigter Träger von Informationen: muss hinreichend beschrieben werden (z. B. Struktur der Grafik, enthaltener Text)

Beispiele

Diese Grafik illustriert die Aussage des Textes.
Möglicher Alternativtext: "Grafik: im Hintergrund Blatt mit Text und Fotos, davor ein gezackter Pfeil von links unten nach rechts oben. An jedem Zacken eine Sprechblase in jeweils anderer Farbe."

Dieses Bild liefert Infos, die nicht im Text vorhanden sind. 
Möglicher Alt-Text: "Schaubild „Lerntaxonomiestufen nach Anderson & Krathwohl (2001)“. Sechs Felder übereinander mit Text von unten nach oben nummeriert. „1. Erinnern; 2. Verstehen, 3. Anwenden, 4. Analysieren, 5. Evaluieren, 6. Erschaffen“. Daneben Pfeil, der von unten nach oben zeigt „Komplexität“."

Nach: Leitfaden zur Erstellung von Alternativtexten im Bildungskontext. Kathrin Schilbach, Anne Haage (Kompetenzzentrum digitale Barrierefreiheit.nrw, Technische Universität Dortmund), CC BY 4.0. 

6. Funktionale Bilder

Bei funktionale Bildern ist es wichtig, ihre Funktion zu beschreiben. Beispiele für funktionale Bilder sind Icons oder Bilder, die als Link oder Button eingesetzt werden.

• Sie benötigen auf jeden Fall einen Alternativtext, der das Ziel des Links oder die Funktion des Buttons deutlich benennt. 
• Das konkrete im Bild ist hier weniger wichtig.
• Achten Sie darauf, dass sich der Alternativtext nicht mit dem Text über dem Link doppelt.

Beispiel: Icons oder Bilder, die nur eine Funktion symbolisieren, sollten nicht beschrieben werden, sondern der Alttext nennt die Funktion. In diesem Fall sind Bilder Links.

Nach: Leitfaden zur Erstellung von Alternativtexten im Bildungskontext. Kathrin Schilbach, Anne Haage (Kompetenzzentrum digitale Barrierefreiheit.nrw, Technische Universität Dortmund), CC BY 4.0. 

7. Bilder/Grafiken mit Text

Schriftgrafiken sind Bilder, die Text tragen (WCAG Kriterium 1.4.5), wie beispielsweise Logos. Aussagen werden auf Hintergrundbildern platziert oder Schrift wird als Bild präsentiert. Diese Bilder brauchen einen Alternativtext, in dem der Text auf dem Bild zu lesen ist.

In besonderen Fällen, wie der bildlichen Darstellung mathematischer Formeln, sollte die Darstellung mithilfe von LaTeX oder MathML umgesetzt werden statt den Ausdruck semantisch zu beschreiben. Dabei handelt es sich um Auszeichnungssprachen, die es ermöglichen, den Inhalt und die Darstellung mathematischer Ausdrücke prägnant und klar zu beschreiben. Zum Beispiel ist die Mathematical Markup Language (MathML), ein XML-basiertes Dokumentenformat zur Darstellung mathematischer Formeln und komplexer Ausdrücke.

Beispiele

Manchmal sind Texte in Bildern dargestellt, z.B. Schriftgrafiken in Logos. Dann muss der Text im Alttext beschrieben werden.

Ein wichtiger Sonderfall sind Formeln, die in der Regel nicht mit Text abgebildet werden kann. Dann sollte die Darstellung mithilfe von LaTeX oder MathML umgesetzt werden.

Alt-Text: x =  \sqrt[n]{a

Grafik mit wichtigen Informationen

Möglicher Alternativtext: "Grafik: Balkendiagramm zeigt die durchschnittlichen monatlichen Ausgaben von Studierenden bundesweit nach der 22. Sozialerhebung des Bundesministeriums für Bildung und Forschung. Nach Größe der Ausgaben: Miete x €, Mobilität x €, Freizeit x€, Kleidung x €, Telefon/ Internet x€, Lernmittel x €"

Nach: Leitfaden zur Erstellung von Alternativtexten im Bildungskontext. Kathrin Schilbach, Anne Haage (Kompetenzzentrum digitale Barrierefreiheit.nrw, Technische Universität Dortmund), CC BY 4.0. 

8. Bildergruppen

Bei Bildergruppen sollten Sie überlegen, ob jedes Bild einzeln mit einem Alternativtext ausgestattet wird oder ob eine zusammenhängende Beschreibung der Bilder und wie sie zueinander in Beziehung stehen, besser ist. Hier entscheidet wieder der Kontext. Wenn Sie beispielsweise einer Collage haben, in der jedes Bild eine eigene Aussage hat, sollte jedes Bild einzeln beschrieben werden.

Handelt es sich beispielsweise um eine mit SmartArt erstellte Gruppierung von Formen (mit Text), so sollte diese besser als Screenshot zusammenhängend beschrieben werden, anstatt einzeln. Denn so kann direkt die Struktur und mögliche Beziehung zwischen den Formen mit beschrieben werden.

Beispiel

In diesem Fall besser einen Screenshot mit Alternativtext einfügen.

Nach: Leitfaden zur Erstellung von Alternativtexten im Bildungskontext. Kathrin Schilbach, Anne Haage (Kompetenzzentrum digitale Barrierefreiheit.nrw, Technische Universität Dortmund), CC BY 4.0. 

9. Dekorative Bilder

Dekorative Bilder oder auch Schmuckbilder benötigen keinen Alternativtext, da sie meist einen rein visuellen Wiedererkennungswert haben, jedoch keine inhaltstragenden Informationen enthalten. 

Wann ein Bild den Text illustriert und beschrieben werden soll, und wann es rein dekorativen Charakter hat, ist nicht immer einfach zu entscheiden. Auf Webseiten und in Moodle-Kursen gibt es oft Teaserbilder. Manches Teaserbild für eine Rubrik, die z. B. die Kontaktaufnahme symbolisieren soll, muss vielleicht nicht unbedingt beschrieben werden. Viele Teaserbilder für Rubriken und Meldungen  sind jedoch mit Bedacht gewählt und tragen eine Aussage. Sie sollte nicht weggelassen werden. Auch Nutzer*innen mit Screenreader wollen sich einen Eindruck von der Gestaltung machen. Bekommen sie den Eindruck, dass es sich um eine reine Textseite mit höchstens einem Bild handelt, erhalten sie einen falschen Eindruck. Außerdem können sie schnell selbst entscheiden, ob sie den Alternativtext anhören oder überspringen wollen. Wenn Sie alle Stockbilder als dekorativ kennzeichnen und damit unsichtbar machen, haben Screenreadernutzende keine Wahl mehr.

Wenn Ihnen die Alt-Texte einer Seite oder eines Inhalts banal und nichtssagend vorkommen, ist es vielleicht Zeit, die Bildauswahl zu überdenken. Und im Zweifelsfalls gilt: Lieber einen Alternativtext zu viel.

Nach: Leitfaden zur Erstellung von Alternativtexten im Bildungskontext. Kathrin Schilbach, Anne Haage (Kompetenzzentrum digitale Barrierefreiheit.nrw, Technische Universität Dortmund), CC BY 4.0. 

10. Komplexe Bilder

Wenn Grafiken oder Diagramme so komplex sind, dass sie einer längeren Beschreibung bedürfen, ist es möglicherweise hilfreicher zwei Beschreibungen für dieses Bild anzufertigen. In diesem Fall wird ein kurzer Alternativtext für den Screenreader mit einer knappen Beschreibung und Hinweis, wo eine längere Beschreibung hinterlegt ist, angefertigt.

Zusätzlich gibt es eine ausführliche Bildbeschreibung, die für alle lesbar ist, zum Beispiel als ausklappbares Akkordeon auf einer Webseite direkt unter dem Bild oder als herunterladbares Word-Dokument.

In bestimmten Fällen ist es hilfreich die Grafik nach einer bestimmten Struktur zu beschreiben. Zum Beispiel bei einem Flussdiagramm, welche eine häufige Methode im Bildungskontext sind, um Informationen darzustellen. Hier bietet es sich an diese bildlich verzweigte Darstellung als verschachtelte Liste zu beschreiben. Die einzelnen Elemente können mit Zahlen geordnet werden und die jeweiligen Verbindungen als Unterpunkte der jeweiligen Elemente. Es ist nicht nötig visuelle Attribute, wie Farben oder Formen zu beschreiben, außer sie tragen eine ganz bestimmte Aussage, die beispielsweise auch prüfungsrelevant ist. Zusätzlich kann eine taktile Version eines Diagramms helfen dies zu verstehen. Diese Hinweise werden vom Diagramm Center gegeben, einem US-amerikanischen Forschungszentrum, welches einen Überblick gibt, auf welche Arten verschiedene Diagrammtypen beschrieben werden können und worauf dabei zu achten ist.

Zusätzliche Bildbeschreibungen für komplexe Grafiken

Wie erwähnt bietet es sich im Falle eines komplexen Bildes an, einen kurzen beschreibenden Alternativtext zu hinterlegen, der durch den Hinweis auf eine ausführlichere Bildbeschreibung an anderer Stelle ergänzt wird. Neben Bildunterschriften und Alternativtexten können sehbeeinträchtigte oder blinde Personen zusätzlich aus Begleittexten und Bildbeschreibungen Informationen über ein Bild erhalten. Hier eine kurze Übersicht über die vier verschiedenen Textmöglichkeiten und deren Charakteristika:

• Der Alternativtext liegt "hinter" dem Bild und wird von Screenreadern vorgelesen.
• Die Bildunterschrift ist direkt unter dem Bild zu finden und enthält Kurz-Informationen zum 
  Bild. Diese sollten sich im Alternativtext nicht doppeln.
• Der Begleittext ist der Text, in den das Bild integriert ist. Im Begleittext integrierte Informationen über das Bild können bei der Formulierung des Alternativtextes vorausgesetzt werden.

Es kann sein, dass auch für eine komplexe Grafik ein kurzer Alternativtext ausreicht, wenn im Begleittext bereits die Grafik umfassend beschrieben wird. Ist dies nicht der Fall, brauchen komplexe Grafiken eine zusätzliche Bildbeschreibung. Anders als Alternativtexte sind Bildbeschreibungen (wie auch die Bildunterschrift und der Begleittext) für alle Nutzer*innen sichtbar. Sie können als Lightbox in den Begleittext (in der Nähe des entsprechenden Bildes) integriert oder in einem zusätzlichen Dokument zur Verfügung gestellt werden. Im Alternativtext sollte darauf hingewiesen werden, wo die jeweilige Bildbeschreibung zu finden ist. Zunächst gelten viele der grundlegenden Regeln für Alternativtexte auch für Bildbeschreibungen.

Hier ein paar Regeln für die Bildbeschreibung:

• Auch Bildbeschreibungen sollten den Inhalt des Bildes objektiv beschreiben und keine Interpretationen enthalten. Erlauben Sie den Nutzer*innen stattdessen, sich ihre eigene Meinung zu bilden.
• Die Informationen aus dem Begleittext und der Bildunterschrift vorausgesetzt werden und sollten nicht wiederholt werden.
• Gehen Sie auf Farben nur ein, wenn sie von Bedeutung sind. Beliebige Farben für Elemente von Balken- und Liniendiagrammen müssen beispielsweise nicht angegeben werden.
• Denken Sie an Ihre Zielgruppe und ihr Vorwissen: Richten Sie das Vokabular sowie die Verwendung von Fachtermini an den Kenntnissen der Lernenden aus.
• Vom Allgemeinen zum Spezifischen:
  Da Bildbeschreibungen umfangreicher als Alternativtexte sind und alle Elemente und Zusammenhänge einer komplexen Grafik beschreiben, sollten Sie mit dem übergeordneten Kontext beginnen. Gehen Sie dann zu den Details über, die das Verständnis verbessern. So können die Lernenden selbst entscheiden, wie viele Informationen sie lesen möchten. (HD@DH.NRW (Redeker) 2023)
• Ein Beispiel auf der Webseite der Fakultät Sozialwissenschaften der Technischen Universität Dortmund. Hier gibt es zu dem Organigramm zusätzlich ein Worddokument, in dem das Organigramm als übersichtliche Liste dargestellt wird.

Beispiel

Flow Chart: 

Möglicher Alt-Text: "Flussdiagramm Thrombose Gefahr, ausführliche Beschreibung (Ort angeben)."

Mögliche Beschreibung: "Flussdiagramm mit acht beschrifteten Kästen, die durch Pfeile verbunden sind. Das Diagramm verläuft unidirektional nach rechts, teilweise kommen Kästchen als Zusatz zum Flow dazu. Bei jedem Schritt zeigen Pfeile vorwärts zu einem oder mehreren Kästchen. Das Diagramm behandelt das Thema Thrombose-Gefahr. Liegt eine Gefahr vor, sind die Kästchen rot eingefärbt, liegt keine Gefahr vor, sind sie grün eingefärbt. Das Flussdiagramm wird als Liste beschrieben, in der die möglichen nächsten Schritte unter jeder Kästchenbeschriftung aufgeführt sind.
Erstes Kästchen: Venous flow (rot)
a. weiter zu Lower extremeties (rot)
Lower extremeties
a.  weiter zu Statis of Blood (rot)
Statis of Blood
a. Dazu kommt Risk factors (rot)
Von Status of Blood mit Risk factors
Dazu kommt: medical intervention (grün)
Zu Bleeding (rot)
Zu no thrombosis formation (grün)"

Nach: Leitfaden zur Erstellung von Alternativtexten im Bildungskontext. Kathrin Schilbach, Anne Haage (Kompetenzzentrum digitale Barrierefreiheit.nrw, Technische Universität Dortmund), CC BY 4.0. 

11. Image Map

Eine Image-Map (Imagemap) ist ein Bild, das mehrere klickbare Bereiche enthält. Statt dass das ganze Bild ein einziger Link ist, werden Teilflächen (z. B. Rechtecke, Kreise oder Polygone) definiert, die jeweils eigene Links/Funktionen haben.

Typische Beispiele

• Lageplan/Grundriss: Klick auf Gebäude A/B führt zu unterschiedlichen Seiten
• Grafik mit Bereichen: Klick auf Organsysteme, Länder, Bauteile
• Navigationsgrafik: verschiedene Menüpunkte liegen als Bereiche im Bild

Technische Varianten

• Clientseitige Image-Map (üblich im Web):
  Umsetzung mit <img usemap="…">, <map> und <area> – hier können Alternativtexte für Bild und Bereiche vergeben werden.
• Serverseitige Image-Map (veraltet/problematisch):
  Klickposition wird an den Server geschickt; einzelne Bereiche sind nicht sauber als Links auszeichnungsfähig → schlecht für Barrierefreiheit.
• als SVG eingebettet (inline im HTML) oder eingebunden als SVG-Datei
• H5P-Elemente, die wie Image-Maps wirken (z. B. Hotspots)

Warum Image-Maps barriere-kritisch sein können

• Viele kleine Klickflächen sind mit Tastatur, Zoom oder mobil schwer bedienbar.
• Ohne gute Texte (Alt-Texte/Linktexte) sind die Ziele für Screenreader-Nutzende unklar.
• Deshalb: Wenn Image-Maps genutzt werden, immer mit Alt-Texten auf zwei Ebenen und redundanter Linkliste arbeiten.

Merkliste

• img alt = Was ist dargestellt? (Gesamtbild)
• area alt = Wohin führt der Link / was passiert? (wie Linktext)
• area title = optionaler Zusatz, nicht einzige Informationsquelle
• Tab-Reihenfolge beachten + redundante Linkliste bereitstellen

nach – – [barrierefreies-webdesign.de] | Jan Hellbusch (2001-2026)

12. KI als Hilfsmittel

13. Links, Tools, Materialien