Fünf Tipps

Barrierefreies Internet: Web Accessibility für visuelle Inhalte
Keine Kommentare

Wir leben und arbeiten in einer zunehmend visuellen Welt, die sich auf Bilder, Fotos und Videos verlässt, um komplexe Informationen zu kommunizieren. Vom einfachen Emoticon bis hin zum 4K-Ultra-HD-Video nutzen Unternehmen visuelle Inhalte, um Informationen zu teilen, Communitys und Beziehungen aufzubauen, Kunden zu überzeugen und zu begeistern, Produkte und Dienstleistungen zu verkaufen oder einfach nur um Menschen zu unterhalten. Oft werden dabei Menschen mit Sehbeeinträchtigungen übersehen.

Laut World Bank Blogs leiden 15 Prozent der Weltbevölkerung – das ist immerhin jeder sechste Mensch weltweit – an einer Form der Sehbehinderung. Da wir uns immer mehr auf das Internet verlassen, ist ein wichtiger Bestandteil von Diversity und Inklusion (D&I), die eigene Website barrierefrei zu gestalten.

Ein Fall für Accessibility (A11y)

Barrierefreiheit, oder auch Web Accessibility, wird oft als „A11y“ bezeichnet. Ein „Numeronym“, bei dem 11 für die Anzahl der Buchstaben zwischen dem „A“ und „y“ im Wort „Accessibility“ steht. Die Web Accessibility Initiative (WAI) des World Wide Web Konsortiums (W3C) hat eine Reihe von Richtlinien für barrierefreie Webinhalte (auf Englisch Web Content Accessibility Guidelines, kurz WCAG) veröffentlicht. Diese enthalten unter anderem vier Prinzipien, die die Grundlage der Barrierefreiheit im Web darstellen:

  • Wahrnehmbar – Informationen und Komponenten der Benutzeroberfläche müssen für die Benutzer so dargestellt werden, dass diese sie wahrnehmen können
  • Bedienbar – Komponenten der Benutzeroberfläche und die Navigation müssen bedienbar sein
  • Verständlich – Informationen und die Bedienung der Benutzeroberfläche müssen verständlich sein
  • Robust – Inhalte müssen so robust sein, dass sie von einer Vielzahl von User Agents, einschließlich assistiver Technologien, zuverlässig interpretiert werden können

Zwischen Barrierefreiheit und Benutzerfreundlichkeit besteht ein schmaler Grat. Auch wenn beides nicht ganz dasselbe ist, gehen sie doch Hand in Hand. Wenn das Publikum eine App nicht mit Leichtigkeit und Vertrauen nutzen kann, dann ist sie nicht zugänglich genug und bietet eine schlechte Benutzererfahrung.

Wenn es um Bilder, Fotos und Videos auf Webseiten geht, sollten alle Besucher und Besucherinnen in der Lage sein, zeitbasierte Medien (Bilder, Fotos oder Videos, die sich über die Zeit entfalten), Farbverwendung und gemischte Webinhalte wahrzunehmen. Die folgenden fünf Tipps helfen dabei, die visuellen Medieninhalte barrierefrei und benutzerfreundlicher zu gestalten.

1. Alt-Text: die Bilder für sich selbst sprechen lassen

Die Verwendung von Alternativtext (Alt-Text) in HTML ist seit Langem eine gängige SEO-Praxis, die auch im Hinblick auf die Barrierefreiheit gut funktioniert.

Laut Moz wird der Alt-Text „innerhalb des HTML-Codes verwendet, um das Aussehen und die Funktion eines Bildes auf einer Seite zu beschreiben“. Alt-Text hat drei Funktionen:

  • Er schafft Barrierefreiheit, das heißt, er hilft sehbehinderten Nutzern, den Inhalt zu verstehen.
  • Er dient als Platzhalter in Fällen, in denen zugehörige Bilder nicht zugänglich sind.
  • Er hilft durch die Bereitstellung von Kontext Suchmaschinen-Crawlern beim Indizieren von Inhalten.

Für ein optimales Nutzererlebnis sollten alle Bilder mit einem Alt-Text versehen werden. Wird der Alt-Text, was zum Beispiel oft der Fall bei dekorativen Bildern ist, weglassen und laden diese dann nicht, haben die Betrachter keine Ahnung, was sie verpassen.

Das Hinzufügen klarer, prägnanter und lesbarer Alt-Beschreibungen zu Bildern kann jedoch sehr arbeitsintensiv sein – insbesondere bei der Auslieferung an Screenreader für Blinde. Dank der Fortschritte bei den KI-Algorithmen zur Medienerkennung und -kategorisierung in den letzten zehn Jahren gibt es jedoch Tools, die die Generierung von Schlüsselwörtern in großem Umfang und mit beeindruckender Geschwindigkeit automatisieren. Beispiele sind Amazon Rekognition Auto Tagging, Google Auto Tagging, Imagga Auto Tagging. Der Prozess ist intuitiv – selbst bei Tausenden von Bildern.

2. Dunkel- oder Hellmodus aktivieren

Der Dunkelmodus ist zwingend erforderlich für Benutzer mit Lichtempfindlichkeit, einer weitverbreiteten Sehbehinderung unserer Epoche, wo wir zu viel Zeit vor dem Bildschirm verbringen.

Eine einfache Möglichkeit, den Dunkelmodus zu aktivieren, ist die Verwendung der invert()-Funktion von Cascading Style Sheets (CSS). Diese Funktion ermöglicht es, einen Filter auf ein Bild anzuwenden, der alle verfügbaren Farben innerhalb einer App in die genau entgegengesetzten Farben umwandelt und somit den Dunkel- oder Hellmodus ein- oder ausschaltet.

Das Problem bei dieser Lösung ist, dass sie auf alle Bilder angewendet wird, wodurch auch deren Farben umgekehrt werden. Anspruchsvollere Bildverwaltungstools hingegen erlauben die automatische Anwendung von Transformationen, die alle Bilder in invertierter Farbe anzeigen, aber das ursprüngliche Aussehen im dunklen oder hellen Modus beibehalten.

3. Bild- und Textfarben kontrastieren

Kontrastierende Bild- und Textfarben halten das Publikum bei der Stange. Müssen die Webentwickler diese jedoch manuell programmieren, erfordert das nicht nur viele Ressourcen, sondern auch viel Wartung. Bei einigen Bildverwaltungstools lässt sich die Anwendung von Helligkeits-/Opazitätseffekten automatisieren. Durch die Einstellung der entsprechenden Helligkeit (und Opazität) auf einem Bildhintergrund ermöglichen die Tools das richtige Kontrastverhältnis zwischen dem Hintergrund und dem überlagerten Text, wodurch eine gute Lesbarkeit auch für Personen mit Sehschwäche gewährleistet wird.

4. Videos lesbar machen

Um die Zugänglichkeitsstufen A und AA der WCAG zu erfüllen, sollten Videos mit Untertiteln versehen werden. Dies nützt allen Nutzern, da ganze 80 Prozent der Videos mit ausgeschaltetem Ton angesehen werden. KI-basierte Videotranskriptionstools ermöglichen es, die Erstellung von Untertiteln für Videos zu automatisieren.

5. Farbfehlsichtigkeiten beachten

In den Tagen des Schwarz-Weiß-Fernsehens wurde der britische Snooker-Kommentator Ted Lowe berühmt für seinen Ausspruch: „Steve will Pink lochen – und für alle, die dies in Schwarz-Weiß sehen: Pink liegt neben Grün.“ Das war in den 1960er-Jahren. Doch für rund 300 Millionen Menschen weltweit bleibt die scheinbar einfache Aufgabe, Farben zu unterscheiden, eine tägliche Herausforderung.

Von Farbenblindheit oder Farbenfehlsichtigkeit ist etwa einer von zwölf Männern und eine von 200 Frauen betroffen. Das sind mehr als acht Prozent der Bevölkerung – ein signifikanter Anteil, dem möglicherweise wichtige Informationen auf einer Website entgeht, wenn die Farbwahl diese Sehschwächen nicht berücksichtigt.

Farbenfehlsichtigkeit bedeutet nicht nur, Farben anders zu sehen. Betroffene können tatsächlich wichtige Informationen verpassen, je nachdem, wie ein Bild zusammengesetzt ist. Manche Objekte können völlig unkenntlich sein. Selbst wenn Farben und Formen gut voneinander getrennt sind, können Bilder, die Bedeutung durch Farben vermitteln, problematisch werden. Menschen, die an Deuteranopie – einer Form der Rot-Grün-Farbenblindheit – leiden, haben beispielsweise oft Schwierigkeiten, die Legenden von Kreisdiagrammen zuzuordnen.

Es gibt kostenlose Tools (Cloudinary bietet eines an), die simulieren, wie ein Bild für Menschen mit Farbenfehlsichtigkeit wie Deuteranopie, Protanopie, Tritanopie, Tritanomalie, Deuteranomalie, Zapfen-Monochromie und Stäbchen-Monochromie aussieht. Diese Tools ermöglichen auch eine Bildanalyse, um Farbenfehlsichtigkeit-Scores und Informationen darüber zu erhalten, welche Farben am schwersten zu unterscheiden sind.

Dank einer solchen objektiven Bildananlyse können gezielt die für alle am besten zugänglichen Bilder ausgewählt werden. Können aus welchen Grund auch immer die Bilder nicht ausgetauscht werden, kann die Einrichtung eines Toogle-Buttons helfen, die Bilder auf der Website oder der App für Menschen mit Farbenfehlsichtigkeit darzustellen. So lassen sich die Originalbilder mit den Originalfarben beibehalten, und Menschen mit Farbenfehlsichtigkeit haben trotzdem eine Möglichkeit, alle Details zu sehen.

Auch wer es den Nutzern erlaubt, eigene Inhalte auf eine Website/ App hochzuladen, sollte zum Nachdenken über die Barrierefreiheit in Hinblick auf Farbenfehlsichtigkeit anregen. Unternehmen könnten zum Beispiel die Ergebnisse von Bildanalysen wie Farbenfehlsichtigkeit-Scores teilen oder einen Mechanismus bereitstellen, der Farbenfehlsichtigkeit simuliert.

Barrierefreiheit ist ein breites Thema. Web Accessibility für visuelle Inhalte wie Fotos und Videos ist nur ein kleiner, wenn auch bedeutender Teil davon. Es richtigzumachen, erfordert zwar akribische und mühsame Arbeit, aber viel davon kann mithilfe von KI automatisiert werden. Wie bereits erwähnt, gehen Barrierefreiheit und Benutzerfreundlichkeit Hand in Hand. Sind die visuellen Medieninhalte barrierefrei, profitieren letztlich alle Benutzer davon.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Abonnieren
Benachrichtige mich bei
guest
0 Comments
Inline Feedbacks
View all comments
X
- Gib Deinen Standort ein -
- or -