Barrierefreie Multimedia-Inhalte
Textalternativen für Bilder und Grafiken
Um Bilder barrierefrei zu gestalten, müssen präzise Alternativtexte erstellt werden, die Screenreadern die Möglichkeit bieten, diese vorzulesen und sehbehinderten Menschen den Zugang zu den Informationen zu gewähren. Folgende Elemente benötigen Textalternativen:
- Bilder (Fotos, Illustrationen, Logos)
- Grafiken (Diagramme, Darstellungen von Informationen)
- Icons (Navigations-Icons, Social Media Icons)
- Animationen (GIFs, animierte SVGs)
- Video- und Audioinhalte
Für Bildelemente (<img>) wird das alt-Attribut verwendet. Der Alternativtext wird als Wert dieses Attributs innerhalb des <img>-Tags angegeben.
Beispiel:
<img src="bild-von-roten-sandalen.png" alt="Rote Sandalen für Frauen"/>Textalternativen sollten individuell gestaltet und nicht mehrfach im selben Kontext verwendet werden. Sie sollen dem Nutzer eine differenzierte Vorstellung der einzelnen Grafiken vermitteln und präzise beschreiben, was auf einem Bild zu sehen ist.
Note
Wenn ein Bild rein dekorativ ist und keine wichtige Information vermittelt, sollte ein leeres alt-Attribut gesetzt werden (alt="").
Keine Schriftgrafiken
Verwenden Sie keine Bilder zur Darstellung von Textinhalten, Texte müssen als tatsächliche Texte eingefügt werden. Schriftgrafiken sind in Bezug auf die Schriftgröße und den Kontrast nicht anpassbar und der darin enthaltene Text kann von Screenreadern nicht vorgelesen werden. Nutzen Sie stattdessen Textelemente zur Darstellung von Textinhalten.
Ausnahmen hiervon sind Logos, bei denen die grafische Darstellung der Schrift wesentlich ist. Diese müssen einen Alternativtext haben, wenn sie relevante Informationen vermitteln oder Links enthalten. Ein beschreibender Alternativtext für ein Logo sollte den Zweck und die Identität der Marke beschreiben, alleinige Begriffe wie „Logo“ sollten vermieden werden. Ist das Logo verlinkt, sollte der Alternativtext den Zweck des Links zusätzlich zum Markennamen beschreiben. Ein geeigneter Alt-Text könnte beispielsweise sein: „Firma XYZ – Zur Startseite“. Auf diese Weise wird klar, dass das Logo zur Hauptseite der Website führt.
Alternativen für Video- und Audiodateien
Videodateien benötigen ergänzende Textalternativen, um den Inhalt für Menschen mit Behinderungen zugänglich zu machen. Sie müssen mit folgenden Elementen ausgestattet sein:
- Untertitel: Synchronisierte Textdarstellung des gesprochenen Wortes im Video
- Transkripte: Eine vollständige Textversion des gesamten Audioinhalts (gesprochenes Wort und wichtige Geräusche)
- Audiodeskription: Gesprochene Beschreibungen der wichtigen visuellen Informationen im Video, die während der Pausen im Dialog oder anderen wichtigen Audioelementen eingefügt werden
- Alternativtext für das Posterbild: Eine kurze Beschreibung des Vorschaubildes (Posterbild), das angezeigt wird, bevor das Video abgespielt wird
Für reine Audiodateien sind lediglich Transkripte erforderlich.
Abschaltbare, begrenzt flackerne Animationen
Bei der Verwendung von GIFs und Animationen dürfen Inhalte maximal dreimal pro Sekunde aufblitzen, da ein schnelleres Flackern epileptische Reaktionen bei Betroffenen auslösen kann. Blinkende Inhalte sollten daher bestenfalls gänzlich vermieden werden. Ist die Verwendung dieser aber notwendig, ist es ratsam, auf endlos wiederholende GIFs zu verzichten und Animationen kurz, langsam und vorzugsweise ohne Schleife zu gestalten, um visuelle Belastungen zu vermeiden.
Zudem muss es für Animationen, die länger als fünf Sekunden dauern, eine Funktion zum Anhalten, Pausieren oder Ausblenden geben. Für wichtige Inhalte, die durch Animationen vermittelt werden, sollte immer eine statische Alternative in Textform bereitgestellt werden (Siehe Textalternativen für Bilder und Grafiken). Trigger-Warnungen vor Animationen können zudem sinnvoll sein, um Nutzern die Möglichkeit zu geben, sich auf den potenziellen Inhalt vorzubereiten oder ihn ganz zu vermeiden