Medien

Auch wenn e-commerce-barrierefrei.de kein Kurs ist, der die absoluten Basics beibringen will, so ist an dieser Stelle eine Wiederholung der Altnerativtext-Grundlagen für Bilder sinnvoll. Dazu habe ich den „Alt Tree Decision Tree“ von w3.org übersetzt und erweitert. Hinweis: wie auch das Original deckt dieser Alternativtext-Entscheidungsbaum nicht alle Fälle ab.

Es wäre seltsam, Produkte und Dienstleistungen nur in Textform zu präsentieren, zumal das Medium Web zur Präsentation auf weitere Kanälen wie Abbildungen und auch Produktvideos einlädt. Häufig vermitteln Produktbilder Informationen und Emotionen auf visuellem Wege und dienen damit der weiteren Beschreibung. Ein Ziel der Web-Barrierefreiheit und deswegen auch Stoßrichtung des BFSG ist es, diese Informationen und Emotionen allen so zugänglich wie möglich zu machen. Da wir beim www-gestützten E-Commerce es mit HTML und weiteren etablierten Webtechnologien zu tun haben, gibt es einige Standardwege und „best practices“ dafür. Ganz allgemein formulierte Strategien finden sich im Basiswissen-Modul. Im Folgenden versuche ich nun, Ihnen diese etablierten Wege im Online-Shop-Kontext zu erklären.

Häufig haben Abbildungen zwei Ziele:

All dies müssen auch sogenannte „Medienalternativen“ kommunizieren. Wenn z. B. eine strahlende Familie am neuen Küchentisch sitzt, und deswegen sehr glücklich wirkt, ist dies eine Emotion, die sie als Küchentisch-Verkäufer nicht versehentlich, sondern ganz bewusst erzeugen wollen. Entsprechend gehört dies auch in die Alternativfassung des Bildes, die, ganz allgemein formuliert, das Bild in seinem Kontext ersetzen können soll.

Dazu bietet der HTML-Standard seit geraumer Zeit das berühmt-berüchtigte alt-Attribut für <img>-Elemente (mit denen Fotos üblicherweise in ein HTML-Dokument eingebunden werden). Der Wert des Attributs soll mit oben angesprochenen Informationen und Emotionen, die das Bild transportiert, gefüllt werden. Eine Befüllung des Attributs mit SEO-Stichworten, wie es in der Vergangenheit kolportiert und gemacht wurde, ist entsprechend eine ganz schlechte Idee (das sieht Google übrigens auch so). Eine technische Beschränkung der alt-Text-Länge, z. B. durch eine Maximalanzahl an Zeichen gibt es übrigens nicht. Allerdings ist das alt-Attribut nicht die ideale Form von Alternativtext, wenn es um sehr komplexe Inhalte geht:

Wenn ein Bild so informations- (seltener: emotions-)beladen ist, dass eine Bildalternative strukturierte Daten wie Überschriften oder Datentabellen braucht, wäre das zu viel und zu komplex für das alt-Attribut, was faktisch nur einen langen String an Klartext entgegen nehmen kann. In diesem Falle ist zu überlegen, ob der textliche Kontext nicht selbst als Alternativtext gelten kann – wenn das so ist, kann das Bild als "dekorativ" markiert werden, siehe oben im Entscheidungsbaum.

Falls eventuell im Zusammenhang vorhandener Text nicht als Unterstützung beim nicht-visuellen Verständnis eines Bildes dienen kann, und die Bildalternative zu komplex oder zu lang für das alt-Attribut ist, kann man immer noch einen sogenannten Ausklapp-Bereich (siehe Basiswissen-Modul) unterhalb des zu ersetzenden Bildes platzieren. In ihm kann man dann mit strukturierten Daten/HTML-Semantik arbeiten und zum Beispiel ein abgebildetes Diagramm als HTML-Datentabelle wiedergeben. Auch im Bild vorkommende Texte, insbesondere wenn sie selbst Hierarchien besitzen, lassen sich besser und zugänglicher mit HTML-Mitteln innerhalb eines Alternativ-Ausklappbereichs umsetzen. Aus dem alt-Attribut des Bildes lässt sich dann auf die komplexere Bild-Alternative hinweisen. Ein Text wie „Diagramm - Alternative Präsentation der Daten unterhalb“ im Attribut wäre in Ordnung.

Nehmen wir das Praxisbeispiel von Alternativtexten für Produktabbildungen: Hier ist in erster Linie wichtig, dass dieser Text ausführlich ist und viele Informationen abdeckt – schließlich kann man nur schwer im Vorfeld erahnen, welcher Aspekt für den Käufer (hoffentlich) in spe wichtig ist.

Daneben muss man eine vorhandene, sichtbare Produktbeschreibung in das Gesamtbild nehmen. Werden bestimmte Aspekte des Produktes bereits in dieser Beschreibung genannt? Wenn ja, kann man diese im Alternativtext des oder der Produktfotos weglassen. Genau umgekehrt verhält es sich aber dann, wenn eine visuell sichtbare Produkteigenschaft textlich weder im Beschreibungs-, noch im Alternativtext vorkommt. Dies ist häufig ein Signal dafür, dass beim Alternativtext des/der Produktbilder noch Luft nach oben besteht.

Alternativtexte haben die Funktion, ein Bild für Sehbehinderte zu ersetzen (und auch dann zu erscheinen, wenn das Bild nicht lädt). Daraus lässt sich ableiten, dass Alternativtexte ungeeignet für Werbetexte und appetitmachende Marketingformulierungen sind. Einen „Hype“ um das Produkt kann man gerne an anderer Stelle, beispielsweise in der Nähe der Produktbeschreibung etablieren.

Wenn sich im Bild Informationen wiederfinden, beispielsweise die Maße eines Bettes im Ikea-Onlineshop, dürfen diese Fakten nicht allein per Bild kommuniziert werden. Je nach Art und Komplexität dieser Information ist hier der Alternativtext zu verwenden, oder aber die selbe Information an anderer Stelle auf eine leicht auffindbare Art und Weise zu platzieren:

Häufig haben die Produkte Farbvarianten, die meist von der Marketingabteilung oder vom Hersteller erdachte, phantasievolle Namen besitzen. Sehende haben mit vieler der Wortneuschöpfungen häufig schon Probleme, aber häufig noch die visuelle Ebene, und ahnen, welcher Farbton gemeint sein könnte. Für blinde Nutzerinnen und Nutzer erschweren zu blumige, von Marketing getriebene Ausdrücke für z. B. Farben aber das Verständnis. Entsprechend sind Begriffe wie „Cardinal“ und „Amarath“ in Alternativtexten, die Bildinhalte beschreiben soll, zu vermeiden. Oder kämen Sie spontan drauf, welche Farben grob damit gemeint sind? (Lösung: beides sind Rottöne.)

Manchmal reicht ein Bild oder eine Bildergalerie allein nicht aus, um ein Produkt oder seine Nutzung ausreichend zu beschreiben und die Präsentationsform der Wahl ist ein Video. Ähnlich den Bildern kann man hier auch Emotionen und Informationen vermitteln – und ähnlich den Bildern gehört auch genau diese in die Medienalternative. So sollte beispielsweise ein Video, das z. B. die Funktionsweise eines Produktes erklärt, alternativ in Form eines Transkripts bereitstehen (das gerne zum Beispiel in einem Ausklappbereich direkt unter dem Video existiert).

Untertitel sind die Barrierefreiheits-Funktion, die wohl am Ehesten es in den „Mainstream“ geschafft hat. Sei es die Nutzung von Video-Streamingdiensten in einer Fremdsprache, die man lernen möchte und deswegen Untertitel anstellt oder die Nutzung von Kurzclips auf YouTube Shorts, TikTok oder Instagram: so genannte Captions werden gerne genutzt, um entweder das Gesagte besser zu verstehen oder seine Umwelt nicht mit der Audiospur eines Videos zu belästigen oder in einer lauten Umgebung dennoch die Informationen der Tonspur zu erfahren. Und genau so geht es auch Menschen, für die Untertitel ursprünglich gedacht waren: Menschen mit Hörbehinderungen werden in dieser Form Informationen und Emotionen der Audiospur vermittelt. Dies umfasst:

Selbst unabhängig von einer gesetzlichen Verpflichtung macht es somit Sinn, mit untertitelten Videos zu arbeiten. Sie können damit, wie mit fast allen Maßnahmen zur Erhöhung der Zugänglichkeit ihres Online-Shops, mehr Menschen und potentielle Kundschaft von den Vorteilen Ihrer Produkte oder Dienstleistungen überzeugen. Oder – mindestens mit der Zeit gehen, was die Präsentation moderner Videoinhalte im Web angeht.

Gebärdensprache kommt zwar in der WCAG auf Level AA so nicht vor (aber z. B. in der BITV 2.0), aber ich schließe mich der Empfehlung der Aktion Mensch (Seite 25) an:

Untertitel und Gebärdensprachendolmetschungen sind übrigens dann nicht nötig, wenn ein Video „stumm“ ist. Dennoch benötigen diese Videos, wenn Informationen vermittelt werden, eine Alternative in Form von …

Ein weiterer Alternativinhalt für Videos stellt sich die Frage: Ist das Video verständlich, wenn man nur seine Audiospur zur Verfügung hat? Werden wichtige Sprechende dort vorgestellt oder nur über so genannte „Bauchbinden“ identifiziert? Sind Situationen und Präsentationen, die wichtiger Teil des Videos sind, allein über die Tonspur zugänglich und verständlich?

Falls das nämlich nicht der Fall ist, fordern die Web Content Guidelines in Erfolgskriterium 1.2.5 eine so genannte „Audiodeskription“: Damit ist eine textliche bzw. sprachliche Vermittlung von eben jenen fehlenden Informationen und Emotionen auf einer Tonspur gemeint (und der zweite E-Commerce-Prüfbericht der Aktion Mensch vergleicht die Beschreibung mit einem Drehbuch, was ich als ein passendes Bild empfinde). Diese Tonspur kann entweder als zusätzlicher Track (ergänzend zum originalen) angeboten werden, oder es gelingt der oder dem Videoerstellenden, „Ton-Lücken“ in der ursprünglichen Audiospur mit den bisher fehlenden Beschreibungen zu füllen. Ein Beispiel, wie so etwas aussehen (oder eher: klingen) kann, finden Sie hier (auf englisch).

Die Vorgaben und der Sinnhaftigkeit von Untertiteln und Audiodeskriptionen werden dadurch ergänzt, dass diese Barrierefreiheitsfunktionen offensichtlich und selbst barrierefrei erreichbar sein müssen.

Die Europäische Norm (EN) 301 549 – die für das BFSG relevant ist – geht noch ein paar Schritte weiter und verlangt unter anderem:

Als Prüfer von und Berater zur EN 301 549 im BIK BITV-Prüfverbund ist mir bewusst, dass nur wenige Mediaplayer genau diese Anforderungen erfüllen und entsprechend als EN-konform empfohlen werden können. Dazu gehören:

Wer eine Inspiration möchte, wie man ein zugängliches Widget elegant gestalten kann, dem sei dieser Videoplayer in einer Hero-Grafik von Hilton.com ans Herz gelegt. Um die Vorgaben an Video-Abspiel-Komponenten der EN 301 549 wirklich voll zu erfüllen, fehlen noch einige winzige Schritte (z. B. eine Anpassbarkeit der Untertitel) – aber der Hilton-Player zeigt, wie Audiodeskriptionen, Closed Captions und Transkripte platzsparenend und meiner Meinung nach ziemlich hübsch umgesetzt werden können.

Als abschließender Tipp will ich Ihnen eine Metapher zu Medienalternativen auf dem Weg geben, und das ist das gute alte Telefon.

Gehen Sie auf die Einzelproduktseite Ihres meistverkauften Produkts oder erfolgreichsten Dienstleistung. Wenn dort etwas durch Bilder visualisiert wird, überlegen Sie:

Falls Sie Produktvideos oder Videos, die Ihre Dienstleistungen beschreiben, haben, kontrollieren Sie diese (auch hier zum Start ein Video Ihres Verkaufsschlagers):