Barrierefreie Videos, Bildergalerien und Animationen richtig umsetzen
Videos, Bildergalerien und Animationen machen Websites lebendig. Sie zeigen Produkte, vermitteln Einblicke in Unternehmen und präsentieren Dienstleistungen auf anschauliche Weise. Doch was passiert, wenn Besucher ein Video nicht hören können, ein Bilderwechsel zu schnell erfolgt oder eine Animation die Bedienung erschwert?
Gerade bei multimedialen Inhalten entstehen Barrieren, die bei der gewöhnlichen Nutzung einer Website häufig unbemerkt bleiben. Menschen mit Seh- oder Hörbehinderungen, motorischen Einschränkungen oder einer erhöhten Empfindlichkeit gegenüber Bewegungen können dadurch wichtige Informationen verpassen.
Das bedeutet allerdings nicht, dass moderne Websites auf Videos, Bildergalerien oder Animationen verzichten müssen. Entscheidend ist, wie die Inhalte bereitgestellt und technisch eingebunden werden.
Multimediale Inhalte barrierefrei gestalten und zugänglich machen
Bewegte und interaktive Elemente gehören zu einem modernen Webdesign. Ein Video kann komplizierte Abläufe erklären, eine Bildergalerie verschiedene Ansichten eines Produkts zeigen und eine Animation wichtige Funktionen hervorheben.
Damit solche Inhalte möglichst vielen Besuchern zugänglich bleiben, müssen unterschiedliche Anforderungen berücksichtigt werden. Bei Videos betrifft das beispielsweise das bereitgestellte Material und die Wiedergabemöglichkeiten. Bei Bildergalerien und Animationen steht dagegen häufig die technische Bedienbarkeit im Mittelpunkt.
Wir erklären, welche Barrieren bei multimedialen Inhalten auftreten können, welche Anforderungen gelten und wie sich moderne Gestaltung mit einer möglichst zugänglichen Nutzung verbinden lässt.
1. Videos auf Websites zugänglich bereitstellen
Videos kombinieren bewegte Bilder, Sprache und Geräusche. Dadurch können Informationen auf unterschiedliche Weise vermittelt werden.
Allerdings sind diese Informationen nicht automatisch für alle Besucher zugänglich.
Menschen mit Hörbehinderungen können beispielsweise gesprochene Inhalte möglicherweise nicht wahrnehmen. Menschen mit Sehbehinderungen sind dagegen auf zusätzliche Informationen angewiesen, wenn wichtige Aussagen ausschließlich über die Bilder vermittelt werden.
Bei der barrierefreien Bereitstellung von Videos müssen deshalb sowohl das Videomaterial selbst als auch seine Einbindung auf der Website berücksichtigt werden.
Untertitel für gesprochene Inhalte
Untertitel ermöglichen es, gesprochene Informationen auch ohne Ton zu verstehen.
Sie sollten nicht nur die gesprochenen Worte wiedergeben, sondern bei Bedarf auch wichtige Geräusche oder Sprecherwechsel kenntlich machen.
Automatisch erzeugte Untertitel können dabei eine hilfreiche Grundlage sein. Allerdings entstehen häufig Fehler bei Eigennamen, Fachbegriffen oder undeutlich gesprochenen Passagen.
Deshalb sollten automatisch erstellte Untertitel vor der Veröffentlichung kontrolliert und gegebenenfalls korrigiert werden.
Für aufgezeichnete Videos mit Ton gehören geeignete Untertitel bereits zu den grundlegenden Anforderungen der WCAG.
Audiodeskriptionen für visuelle Informationen
Nicht alle wichtigen Informationen eines Videos werden gesprochen.
Manchmal erklären eingeblendete Grafiken einen Sachverhalt, bestimmte Handlungen werden ausschließlich gezeigt oder wichtige Informationen erscheinen als Text im Bild.
Menschen mit Sehbehinderungen können solche Inhalte möglicherweise nicht vollständig erfassen.
Eine Audiodeskription ergänzt das Video deshalb um sprachliche Erläuterungen relevanter visueller Informationen.
Ob zusätzliche Beschreibungen erforderlich sind, hängt vom Inhalt des Videos ab. Werden die wesentlichen Informationen bereits vollständig durch die Tonspur vermittelt, kann eine gesonderte Audiodeskription entbehrlich sein.
Videos richtig in eine Website einbinden
Neben dem Videomaterial spielt auch die technische Einbindung eine wichtige Rolle.
In Content-Management-Systemen wie TYPO3 lassen sich Videos beispielsweise als MP4-Dateien bereitstellen oder über externe Videoplattformen wie YouTube einbinden.
Dabei sollten die verfügbaren Wiedergabefunktionen möglichst einfach bedienbar sein. Besucher müssen beispielsweise die Wiedergabe starten, pausieren und vorhandene Untertitel nutzen können.
Wichtig ist die Unterscheidung zwischen der Zugänglichkeit des eigentlichen Videos und der technischen Einbindung auf der Website.
Eine technisch korrekt eingebundene Videodatei ist nicht automatisch barrierefrei. Fehlen im bereitgestellten Material notwendige Untertitel oder andere Inhaltsalternativen, müssen diese bei Bedarf gesondert erstellt werden.
2. Bildergalerien und Slider barrierefrei gestalten
Bildergalerien bieten die Möglichkeit, mehrere Fotos übersichtlich auf einer Website zu präsentieren. Besonders bei Produktvorstellungen, Referenzen oder Einblicken in ein Unternehmen können sie einen hohen Informationswert besitzen.
Häufig werden dafür Slider eingesetzt, bei denen Besucher zwischen verschiedenen Bildern wechseln können.
Barrieren entstehen beispielsweise dann, wenn die Navigation unverständlich ist, Schaltflächen nicht mit der Tastatur bedient werden können oder sich Bilder ohne Eingriffsmöglichkeit automatisch verändern.
Automatische Bildwechsel kontrollierbar machen
Ein automatisch wechselnder Slider kann auf einer Startseite Aufmerksamkeit erzeugen. Gleichzeitig benötigt nicht jeder Besucher gleich viel Zeit, um Bilder und begleitende Texte zu erfassen.
Wechselt der Inhalt zu schnell, können wichtige Informationen verloren gehen.
Für bestimmte automatisch startende und länger als fünf Sekunden laufende Bewegungen verlangen die WCAG deshalb eine Möglichkeit, diese anzuhalten, zu stoppen oder auszublenden.
Bei der Entwicklung eines Sliders sollten insbesondere folgende Funktionen berücksichtigt werden:
- Wiedergabe anhalten:Besucher können einen automatischen Bildwechsel bei Bedarf pausieren.
- Bilder gezielt auswählen:Einzelne Inhalte lassen sich über entsprechende Bedienelemente aufrufen.
- Bedienung mit der Tastatur:Vorhandene Schaltflächen funktionieren auch ohne Maus.
- Erkennbare Bedienelemente:Pfeile und andere Steuerungen sind ausreichend groß und eindeutig beschriftet.
- Nachvollziehbare Zustände:Unterstützende Technologien können die Funktionen und gegebenenfalls den aktuellen Zustand erfassen.
Nicht jede Bildergalerie benötigt einen automatischen Wechsel. Besonders bei Galerien mit wichtigen Informationen kann eine ausschließlich manuelle Steuerung sinnvoller sein.
Vergrößerte Bilder zugänglich anzeigen
Viele Bildergalerien ermöglichen es, einzelne Fotos in einer größeren Ansicht zu öffnen.
Solche Ansichten werden häufig als Lightbox bezeichnet. Dabei legt sich das vergrößerte Bild über die eigentliche Website.
Damit die Bedienung zugänglich bleibt, müssen Besucher die vergrößerte Ansicht zuverlässig schließen und anschließend zur ursprünglichen Position zurückkehren können.
Auch die Navigation zwischen mehreren Bildern sollte mit unterschiedlichen Eingabemethoden funktionieren.
Wichtig ist außerdem, dass die geöffnete Ansicht technisch korrekt behandelt wird. Beispielsweise darf die Tastaturbedienung nicht unkontrolliert zu Elementen hinter der Bildansicht springen.
Welche Bilder eine Textalternative benötigen und wie diese formuliert werden sollte, erklären wir in unserem Beitrag „Warum Alt-Texte bei Bildern wichtig sind“.
3. Animationen barrierefrei und benutzerfreundlich einsetzen
Animationen können das Erscheinungsbild einer Website bereichern und die Bedienung unterstützen.
Beispielsweise können Inhalte beim Scrollen eingeblendet, Schaltflächen beim Berühren hervorgehoben oder Veränderungen innerhalb einer Anwendung sichtbar gemacht werden.
Solche Effekte müssen nicht grundsätzlich vermieden werden. Entscheidend ist, dass sie einen sinnvollen Zweck erfüllen und die Nutzung nicht beeinträchtigen.
Besonders intensive, großflächige oder dauerhaft wiederholte Bewegungen können für manche Besucher unangenehm sein.
Auch sehr schnelle Lichtblitze können gesundheitliche Risiken verursachen und unterliegen deshalb besonderen Anforderungen.
Bewegungen auf individuelle Bedürfnisse abstimmen
Viele Betriebssysteme bieten eine Einstellung, mit der Nutzer Bewegungen und Animationen reduzieren können.
Websites können diese Einstellung über die technische Funktion prefers-reduced-motion berücksichtigen.
Dadurch lassen sich beispielsweise aufwendige Zoombewegungen abschalten oder animierte Übergänge durch eine ruhigere Darstellung ersetzen.
Wichtig ist, dass die Inhalte auch ohne die ursprüngliche Animation verständlich bleiben.
Eine Überschrift, die normalerweise beim Scrollen eingeblendet wird, sollte beispielsweise bei aktivierter Bewegungsreduzierung direkt sichtbar sein.
Animationen bewusst und gezielt verwenden
Nicht jeder Gestaltungseffekt verbessert automatisch die Benutzerfreundlichkeit.
Kurze Übergänge können Orientierung vermitteln. Dauerhaft pulsierende Schaltflächen oder ständig bewegte Hintergrundelemente können dagegen von den eigentlichen Inhalten ablenken.
Bei der Planung sollte deshalb berücksichtigt werden, ob eine Animation tatsächlich eine Funktion erfüllt oder hauptsächlich dekorativ eingesetzt wird.
Besonders zurückhaltende Effekte lassen sich häufig gut in ein barrierefreies Gestaltungskonzept integrieren.
Eine moderne Website muss nicht auf Animationen verzichten. Sie sollte ihren Besuchern aber ermöglichen, Inhalte möglichst ohne störende Bewegungen zu nutzen.
4. Multimediale Elemente auf unterschiedlichen Geräten bedienen
Videos, Bildergalerien und Animationen werden nicht ausschließlich am Computer genutzt.
Auf Smartphones erfolgt die Bedienung häufig über den Touchscreen. Andere Besucher verwenden eine Tastatur, einen Screenreader oder zusätzliche Eingabehilfen.
Daraus ergeben sich unterschiedliche Anforderungen an die Bedienung.
Ein Slider kann beispielsweise auf dem Smartphone durch Wischen funktionieren. Das bedeutet jedoch nicht, dass er auch für Menschen zugänglich ist, die keine Wischbewegungen ausführen können.
Deshalb sollten wichtige Funktionen nicht ausschließlich von einer bestimmten Eingabemethode abhängig sein.
Unterschiedliche Bedienmöglichkeiten berücksichtigen
Bei multimedialen Elementen ist besonders darauf zu achten, dass:
- Bildergalerien nicht ausschließlich durch Wischbewegungen gesteuert werden können.
- Bedienelemente auf kleineren Bildschirmen ausreichend Platz besitzen.
- Schaltflächen mit der Tastatur erreichbar bleiben.
- Die aktuelle Bedienposition gut erkennbar ist.
- Vergrößerte Darstellungen keine wichtigen Funktionen verdecken.
- Unterstützende Technologien die vorhandenen Steuerungsmöglichkeiten erkennen können.
Solche Anforderungen lassen sich bereits bei der Entwicklung der jeweiligen Komponenten berücksichtigen.
Besonders bei individuell gestalteten Slidern und Bildergalerien ist eine fachgerechte technische Umsetzung wichtig.
Welche weiteren Besonderheiten bei der Nutzung auf mobilen Geräten entstehen, erfährst Du in unserem Beitrag „Barrierefreiheit auf dem Smartphone: Typische Probleme und Lösungen“.
Externe Videos und Medienplattformen richtig einbinden
Viele Unternehmen veröffentlichen ihre Videos nicht direkt auf der eigenen Website, sondern nutzen Plattformen wie YouTube.
Das hat praktische Vorteile. Videos können zentral verwaltet und auf verschiedenen Kanälen bereitgestellt werden.
Allerdings hängen die verfügbaren Wiedergabefunktionen dann auch vom jeweiligen Anbieter ab.
Bei der Einbindung sollte deshalb darauf geachtet werden, ob vorhandene Untertitel genutzt werden können und wie sich der externe Player bedienen lässt.
Die Möglichkeiten zur Anpassung sind dabei begrenzt. Anders als bei selbst entwickelten Website-Komponenten lässt sich die technische Funktionsweise eines fremden Videoplayers nicht vollständig beeinflussen.
Zusätzlich können beim Einbinden externer Plattformen datenschutzrechtliche Fragen entstehen. Je nach eingesetzter Lösung muss beispielsweise berücksichtigt werden, wann Verbindungen zum externen Anbieter hergestellt werden.
Deshalb sollte bereits bei der Planung entschieden werden, ob ein Video direkt auf der Website bereitgestellt oder über eine externe Plattform eingebunden werden soll.
Moderne Mediengestaltung und Barrierefreiheit verbinden
Ein ansprechender Internetauftritt lebt von unterschiedlichen Gestaltungsmöglichkeiten. Bildergalerien können abgeschlossene Projekte präsentieren, Videos persönliche Einblicke vermitteln und Animationen einzelne Inhalte gezielt hervorheben.
Wichtig ist, diese Elemente nicht unabhängig voneinander zu betrachten, sondern in ein durchdachtes Gestaltungskonzept einzubinden.
Dabei müssen die eingesetzten Medien und ihre technischen Funktionen unterschiedliche Voraussetzungen erfüllen.
Während bei Videos insbesondere die Qualität und Zugänglichkeit des bereitgestellten Materials eine wichtige Rolle spielen, lassen sich Bildergalerien, Slider und Animationen gezielt so entwickeln, dass sie unterschiedliche Bedienmöglichkeiten unterstützen.
Eine sorgfältige Planung hilft deshalb, passende Gestaltungselemente auszuwählen und mögliche Barrieren bereits während der Entwicklung zu berücksichtigen.
Videos, Bildergalerien und Animationen professionell einbinden lassen
Multimediale Inhalte bieten zahlreiche Möglichkeiten, eine Website individuell und abwechslungsreich zu gestalten. Damit sie ihre Wirkung entfalten, sollten sie sich harmonisch in das Webdesign einfügen und möglichst einfach bedienen lassen.
Wir übernehmen die Planung, Gestaltung und technische Umsetzung barrierefreier Websites. Dazu gehört auch die Einbindung bereitgestellter Videos über die vorhandenen Funktionen unseres Content-Management-Systems TYPO3.
Bildergalerien, Slider und Animationen gestalten und programmieren wir so, dass unterschiedliche Bedienmöglichkeiten und individuelle Nutzereinstellungen berücksichtigt werden.
Auch bestehende Elemente können wir auf mögliche Barrieren überprüfen und gezielt optimieren.
Du möchtest Videos, Bildergalerien oder Animationen auf Deiner Website einsetzen oder vorhandene Funktionen barrierefreier gestalten lassen? Nimm Kontakt mit uns auf. Wir beraten Dich gerne und übernehmen die Planung und technische Umsetzung Deines Projekts.
FAQ - Häufige Fragen zu barrierefreien Videos, Bildergalerien und Animationen
Automatisch startende Videos sind nicht grundsätzlich ausgeschlossen. Allerdings müssen bestimmte Anforderungen berücksichtigt werden, insbesondere wenn gleichzeitig Ton abgespielt wird.
Startet ein Audioinhalt automatisch und läuft länger als drei Sekunden, muss gemäß WCAG grundsätzlich eine geeignete Möglichkeit bestehen, den Ton anzuhalten, zu stoppen oder unabhängig von der Systemlautstärke zu regeln.
Auch automatisch bewegte visuelle Inhalte können zusätzliche Steuerungsmöglichkeiten erfordern.
Für viele Unternehmenswebsites ist es deshalb sinnvoll, Videos erst nach einer bewussten Nutzeraktion abzuspielen. So entscheiden Besucher selbst, wann sie den Inhalt ansehen möchten.
Automatisch erzeugte Untertitel können eine hilfreiche Grundlage sein. Sie sind jedoch nicht immer korrekt oder vollständig.
Besonders Eigennamen, Fachbegriffe und undeutlich gesprochene Passagen können falsch erkannt werden. Auch wichtige Geräusche oder Sprecherwechsel werden nicht immer ausreichend berücksichtigt.
Deshalb sollten automatische Untertitel vor der Veröffentlichung überprüft und bei Bedarf korrigiert werden.
Entscheidend ist, dass die wesentlichen Informationen des Videos verständlich und möglichst vollständig wiedergegeben werden.
Das hängt vom Videoinhalt und den jeweils geltenden Anforderungen ab.
Werden wichtige Informationen ausschließlich durch Bilder, Bewegungen oder eingeblendete Grafiken vermittelt, können zusätzliche sprachliche Beschreibungen notwendig sein.
Sind dagegen sämtliche wesentlichen Informationen bereits über die Tonspur zugänglich, kann eine gesonderte Audiodeskription entbehrlich sein.
Bei aufgezeichneten Videos mit Bild und Ton gehört die Audiodeskription zu den Anforderungen der WCAG-Stufe AA. Entscheidend ist deshalb, die tatsächlichen Inhalte und die vorhandenen Alternativen zu betrachten.
Ja, allerdings müssen auch stumme Videos entsprechend betrachtet werden.
Ein Video ohne Ton kann beispielsweise bestimmte Arbeitsschritte zeigen oder eine visuelle Anleitung enthalten.
Wenn wichtige Informationen ausschließlich über die Bilder vermittelt werden, benötigen Menschen mit Sehbehinderungen eine geeignete Alternative.
Dafür kann je nach Inhalt beispielsweise eine verständliche Textbeschreibung oder eine andere zugängliche Darstellung sinnvoll sein.
Handelt es sich lediglich um eine dekorative Animation ohne zusätzliche Informationen, können andere Anforderungen gelten.
Nein. Animationen, die beim Scrollen ausgelöst werden, können auch auf barrierefreien Websites eingesetzt werden.
Entscheidend ist, wie stark die Bewegung ausfällt und ob sie die Nutzung beeinträchtigt.
Kurze, zurückhaltende Einblendungen sind häufig unproblematischer als großflächige Verschiebungen oder intensive Zoombewegungen.
Zusätzlich sollten individuelle Systemeinstellungen zur Bewegungsreduzierung berücksichtigt werden.
So kann die Website ihre gestalterischen Effekte beibehalten und gleichzeitig eine ruhigere Darstellung für Besucher anbieten, die darauf angewiesen sind.
Animierte GIF-Dateien sind nicht grundsätzlich ungeeignet. Sie bieten jedoch häufig nur eingeschränkte Möglichkeiten, die Wiedergabe zu steuern.
Besonders dauerhaft laufende Animationen können problematisch sein, wenn sie sich nicht anhalten lassen oder Besucher beim Lesen anderer Inhalte ablenken.
Hinzu kommt, dass GIF-Dateien im Vergleich zu modernen Videoformaten häufig größere Datenmengen verursachen.
Bei umfangreicheren oder dauerhaft bewegten Inhalten können deshalb andere technische Lösungen sinnvoller sein, die eine gezielte Steuerung und Anpassung der Bewegung ermöglichen.
Ja. Auch bei der Einbindung über eine bekannte Videoplattform sollte die Zugänglichkeit berücksichtigt werden.
Der verwendete Player kann zwar verschiedene Bedienmöglichkeiten bereitstellen, doch das eigentliche Videomaterial benötigt gegebenenfalls zusätzliche Untertitel oder andere Inhaltsalternativen.
Außerdem lässt sich die technische Umsetzung des externen Players nicht vollständig über die eigene Website beeinflussen.
Deshalb sollte bei der Auswahl und Einbindung geprüft werden, welche Funktionen verfügbar sind und ob das bereitgestellte Videomaterial die notwendigen Voraussetzungen erfüllt.
Ein manuell gesteuerter Slider kann für viele Besucher angenehmer sein, weil sie selbst entscheiden, wann sie zum nächsten Bild wechseln möchten.
Besonders bei Bildern mit längeren Beschreibungen oder wichtigen Informationen verhindert das, dass Inhalte verschwinden, bevor sie vollständig erfasst wurden.
Allerdings ist ein manuell bedienbarer Slider nicht automatisch barrierefrei. Auch seine Schaltflächen, Beschriftungen und die technische Bedienreihenfolge müssen entsprechend umgesetzt werden.
Ein automatischer Slider kann ebenfalls zugänglich gestaltet werden, wenn die geltenden Anforderungen an Bewegung und Steuerung berücksichtigt werden.
Ja. Eine Bildergalerie benötigt nicht grundsätzlich eine Funktion zum Vergrößern einzelner Bilder.
Entscheidend ist, dass die enthaltenen Informationen zugänglich sind und die vorhandenen Funktionen zuverlässig bedient werden können.
Eine Vergrößerungsfunktion kann beispielsweise bei Produktdetails oder Referenzbildern hilfreich sein. Wird sie angeboten, muss allerdings auch die vergrößerte Ansicht entsprechend zugänglich sein.
Bei einfachen Bildübersichten kann dagegen eine übersichtliche Darstellung ohne zusätzliche Lightbox vollkommen ausreichend sein.
Ja. Wir übernehmen die Planung, Gestaltung und technische Umsetzung barrierefreier Medienbereiche auf Deiner Website.
Wir binden bereitgestellte MP4-Videos oder Videos von Plattformen wie YouTube über die vorhandenen TYPO3-Funktionen ein und berücksichtigen dabei die verfügbaren Wiedergabemöglichkeiten. Notwendige Untertitel, Audiodeskriptionen oder andere inhaltliche Alternativen müssen im Videomaterial vorhanden sein beziehungsweise gesondert bereitgestellt werden.
Bildergalerien, Slider und Animationen können wir dagegen selbst gestalterisch und technisch anpassen. Wir prüfen vorhandene Funktionen, entwickeln geeignete Lösungen und übernehmen die barrierefreie Umsetzung im Rahmen Deines Website-Projekts.
Du möchtest Deine Website mit modernen Medien gestalten lassen oder bestehende Bildergalerien und Animationen barrierefreier machen? Nimm Kontakt mit uns auf. Wir beraten Dich gerne und kümmern uns um die Planung und technische Umsetzung.