Alternativtext oder Alt-Text ist beschreibender Text, den Sie als Kursautor den visuellen Elementen Ihres Kurses hinzufügen und der ihren Inhalt und Zweck erklärt. Die Verwendung von Alt-Text in E-Learning-Kursen ist aus mehreren Gründen wichtig:
- Alle Teilnehmer sollen alle Kursinhalte nutzen können. Alt-Text ermöglicht es Nutzern von Screenreadern – beispielsweise Menschen mit visuellen oder kognitiven Beeinträchtigungen – den Inhalt und Zweck der visuellen Medien zu verstehen.
- Compliance-Richtlinien erfordern Alt-Text. Artikel 1.1.1 der Richtlinie für barrierefreie Webinhalte (Web Content Accessibility Guidelines, WCAG) setzt Alt-Text voraus. Wenn Ihr Kurs also barrierefrei sein soll, müssen Sie Alternativtext verwenden.
- Bei Ladeproblemen greift der Alt-Text. Wenn ein Bild nicht geladen werden kann, erscheint an seiner Stelle der Alternativtext. So ist sichergestellt, dass der Teilnehmer den Inhalt trotzdem verstehen kann.
Damit der Alt-Text seine Aufgabe erfüllt, muss er die richtigen Informationen enthalten. Je nach visuellem Element kann dieses „richtig” jedoch leicht unterschiedlich sein. Im Folgenden schauen wir uns die übliche Vorgehensweise für die vier Bildarten an, die im E-Learning-Bereich häufig vorkommen.
1. Rein dekorative Bilder
Rein dekorative Bilder – wie gliedernde Elemente, Rahmen oder Hintergrundbilder – enthalten keine Informationen, die für die Kursinhalte relevant sind. Um zu entscheiden, ob das auf ein Bild zutrifft, können Sie sich fragen, ob die Lernerfahrung ohne das Bild eine andere wäre. Falls nicht, ist es dekorativ.
Wenn ein Bild rein dekorativ ist, können Sie den Screenreader anweisen, es zu ignorieren. So sparen Sie den Teilnehmern Zeit und lassen sie direkt zu den relevanten Inhalten springen.
Hier ein Beispiel: Das Foto im Bild unten ist rein dekorativ. Es verändert die Lernerfahrung in keiner Weise, sondern soll die Folie lediglich visuell ansprechender machen. Aus diesem Grund haben wir den Screenreader angewiesen, es zu überspringen.
 |
Alt-Text:
|
Weitere Informationen zum Alt-Text für dekorative Bilder finden Sie in diesem Artikel: Decorative Images.
2. Funktionale Bilder
Bilder mit Funktion – die beispielsweise als Schaltfläche oder Link fungieren – haben immer eine bestimmte Aufgabe. Wenn der Teilnehmer mit diesen Bildern interagiert, passiert etwas. Vielleicht springt er dadurch an eine andere Stelle des Kurses, öffnet ein Browserfenster mit einer bestimmten Internetseite oder lädt eine Datei herunter.
Damit es keine Überraschungen gibt, muss Ihr Alt-Text genau beschreiben, was passiert, wenn der Teilnehmer mit dem Bild interagiert.
Wenn der Teilnehmer beispielsweise durch das Anklicken eines bestimmten Symbols eine PDF-Datei herunterlädt, sollte der Alt-Text folgende Informationen enthalten: Die Aktion (Download), den Namen des Dokuments und den Dateityp. Hier ein Beispiel.
 |
| Alt-Text: PDF-Dokument Turbo für die Karriere herunterladen |
Weitere Informationen zum Alt-Text für funktionale Bilder finden Sie hier: Functional Images.
3. Informative Bilder
Informative Bilder sind nicht nur Dekoration, sondern liefern weiteren Kontext oder Zusatzinformationen. Informative Bilder können ganz schlicht oder auch komplex sein. Schauen wir uns beide Varianten einmal an.
Schlichte informative Bilder
Schlichte informative Bilder sind Illustrationen, Fotos oder Diagramme, deren Inhalt und Zweck Sie in ein oder zwei Sätzen erklären können.
Der Alt-Text für die folgende Illustration beispielsweise enthält neben einer Beschreibung des Bildes auch die Bedeutung des abgebildeten Straßenschilds.
 |
| Alt-Text: Ein rundes, blaues Straßenschild mit einem Pfeil nach rechts, das anzeigt, dass hier rechts abgebogen werden muss. |
Komplexe informative Bilder
Komplexe informative Bilder sind alle Bilder, die Inhalt oder Zweck haben und zu vielschichtig sind, um sie in ein oder zwei Sätzen zu erklären. Dazu zählen beispielsweise Tabellen, Graphen und Screenshots. Da ein Alt-Text knapp und präzise sein soll, ist es am besten, die Erklärung für diese Art von Bildern bereits im Kurstext zu geben, und nicht im Alt-Text.
Wieder ein Beispiel: Um alles zu verstehen, das in dem folgenden Graphen abgebildet ist, ist eine ausführliche Erklärung nötig. Der Alt-Text gibt daher nur einen kurzen Überblick über die Abbildung und fordert den Teilnehmer zum Weiterlesen auf, um genauere Informationen zu erhalten.
 |
| Alt-Text: Graph der Forderungen von Januar bis Juni. Bitte lesen Sie weiter, um mehr zu erfahren. |
Weitere Informationen zum Alt-Text für informative Bilder finden Sie in diesem Artikel: Informative Images.
4. Logos
Logos sind Abbildungen, die in keine der oben beschriebenen Kategorien so richtig passen. Sie sind ein bisschen dekorativ, ein bisschen informativ, und manchmal sogar funktional. Aus diesem Grund verdienen sie unserer Meinung nach ihre eigene Kategorie.
Beim Alt-Text für ein Logo kommt es vor allem darauf an, ob das Logo einen Link enthält.
Mit Link
Wenn das Logo funktional ist – also auf eine Webseite verlinkt – sollten Sie im Alt-Text sowohl den Namen der Organisation als auch Informationen zu dem hinterlegten Link angeben. Hier ein Beispiel:
 |
| Alt-Text: Alpha Airlines – Homepage |
Ohne Link
Wenn das Logo keinen Link enthält, können Sie einfach den Namen der Organisation und das Wort „Logo“ aufführen, wenn es zum ersten Mal vorkommt. Wenn das Logo weitere Male vorkommt, sollten Sie den Screenreader anweisen, es zu überspringen, um Wiederholungen zu vermeiden.
Beim ersten Vorkommen:
 |
| Alt-Text: Alpha Airlines logo |
Für alle Wiederholungen:
 |
Alt-Text:
|
Fazit
Mit diesen praktischen Hinweisen schreiben Sie Alt-Text, der wirklich hilfreich ist, und schaffen so eine bessere Lernerfahrung für alle.
Sie möchten weitere bewährte Verfahren im Bereich Barrierefreiheit kennenlernen? Dann empfehlen wir unsere Artikelsammlung zur Barrierefreiheit im E-Learning.
Wenn Sie diesen Beitrag hilfreich fanden, abonnieren Sie doch unseren wöchentlichen Blognewsletter.
