3 Tipps für Audio- und Video-Barrierefreiheit

3 Tips for Audio and Video Accessibility

Stellen Sie sich vor, Sie laden den neuesten Marvel-Filmtrailer auf YouTube (wenn das Ihr Jam ist) oder Ihre Lieblings-Rom-Com auf Netflix, nur um zu erkennen: „Hey, wo ist der Ton?“ Was ist, wenn Sie in einer lauten Bus- oder Zugfahrt sind und einen motivierenden Vortrag Ihres Lieblingsdesigners oder -entwicklers sehen müssen, „aber hey, es gibt keine Bildunterschriften?“

So frustrierend dies auch erscheinen mag, genau dieses Szenario tritt häufig bei Menschen auf, die D/taub oder schwerhörig sind und Videos online genießen möchten.

Das Hosten von Video- oder Audioinhalten ohne Untertitel oder ein Transkript ist eine Barriere für die Barrierefreiheit

Um diese Zugänglichkeitsbarrieren zu vermeiden, müssen wir sicherstellen, dass Untertitel, Videobeschreibungen oder Audiotranskripte verfügbar sind, bevor wir unsere Inhalte für die öffentliche Nutzung freigeben.

1. Schließen Sie Untertitel ein

Das Einfügen von Untertiteln ist ein Muss für Videoinhalte mit gesprochenem Wort. Wie Sie diese Aufgabe ausführen, hängt von Ihrem Videoplayer oder Dienst Ihrer Wahl ab.

HTML-Video

Sie müssen beispielsweise diese Schritte ausführen, wenn Sie Untertitel hinzufügen, während Sie das HTML video verwenden:

  1. Erstellen oder generieren Sie eine WebVTT-Datei ( .vtt ). Diese Datei enthält den Untertiteltext sowie das Timing und die Dauer jeder Untertitelausgabe.
  2. ​Fügen Sie die WebVTT-Datei als src -Attribut zu einem track Element innerhalb des video hinzu . Stellen Sie sicher, dass Sie auch die Attribute label , kind und srclang für Kontext und Klarstellung festlegen.
<video controls> <source src="video.mp4" type="video/mp4" /> <track label="English" kind="subtitles" srclang="en" src="captions/en.vtt" default /> <track label="Français" kind="subtitles" srclang="fr" src="captions/fr.vtt" /> </video>

Sonstige Dienstleistungen

Viele andere beliebte Videodienste bieten die Möglichkeit, eigene Untertitel hinzuzufügen. Einige verfügen sogar über automatische Untertitel, die ihre Algorithmen als genau bestimmt haben. Es wird jedoch empfohlen, eigene hinzuzufügen, insbesondere wenn ungewöhnliche oder technische Terminologie enthalten ist.

So fügen Sie Untertitel für Videodienste hinzu:

Das Fehlen von Untertiteln ist wie das Produzieren eines Videos ohne Tonspur

WCAG-Erfolgskriterien

Dies kommt auf 1.2.2 Captions (Prerecorded) zurück, wo es heißt:

„Untertitel werden für alle aufgezeichneten Audioinhalte in synchronisierten Medien bereitgestellt, außer wenn die Medien eine Medienalternative für Text sind und als solche eindeutig gekennzeichnet sind.“

2. Bieten Sie Audiodeskriptionen an

Audiobeschreibungen sind wichtig, um mitzuteilen, was zwischen den gesprochenen Dialogen passiert. Zu den in der Beschreibung geteilten Informationen können gehören:

  • Ein Tapetenwechsel
  • Eine Figur, die eine Aktion ausführt
  • Kurze Beschreibungen stiller Emotionen

Beim Erstellen von Videos für das Web ist es erforderlich, eine Audiobeschreibung bereitzustellen. ( 1.2.5 Audiodeskription ). Um diese Anforderung zu erfüllen, sollten Sie erwägen, eine zweite verfügbare Audiospur zu erstellen . Wenn Ihr Videoplayer mehrere Audiospuren nicht unterstützt, müssen Sie möglicherweise insgesamt ein separates Video bereitstellen . Stellen Sie sicher, dass Sie von einem Video zum anderen verlinken, um sicherzustellen, dass die Leute auf die alternative Version aufmerksam werden.

Vergleichen Sie zum Beispiel die Audiodaten von Apples Video „Introducing Voice Control on Mac and iOS“ ( Introducing Voice Control on Mac and iOS ) mit der audiodeskriptiven Alternative Introducing Voice Control on Mac and iOS (with Audio Descriptions) . Beachten Sie die zusätzlichen Informationen, die zwischen den Gesprächspartnern beschrieben werden. Es kann hilfreich sein, sich Audiodeskriptionen als alt Text für bestimmte Szenen eines Videos vorzustellen. Verwenden Sie genügend Worte, um das mentale Bild zu malen, aber übertreiben Sie es nicht mit zu vielen Daten.

WCAG-Erfolgskriterien

Dies kommt auf 1.2.5 Audio Description (Prerecorded) zurück, in dem es heißt:

"Audiodeskription wird für alle voraufgezeichneten Videoinhalte in synchronisierten Medien bereitgestellt."

3. Fügen Sie Transkripte für Video- und Audioinhalte hinzu

Transkripte sind eine Klartextversion des Audioteils eines Video- oder Audioinhalts. Dies als Option anzubieten, hat mehrere Vorteile, abgesehen davon, dass Menschen, die D / gehörlos oder schwerhörig sind, jetzt in das Gespräch einbezogen werden können:

  • Suchmaschinen können den Text crawlen und zu ihren Indizes hinzufügen, wodurch Ihre Inhalte durchsuchbar werden
  • Menschen in lauten Umgebungen wie einem Busbahnhof oder einer U-Bahn können den Inhalt lesen, anstatt sich anzustrengen, ihn zu hören
  • Teile von Inhalten können einfacher über soziale Medien geteilt werden, wodurch die Lücke zwischen Lesern, die Ihre Inhalte finden und konsumieren, verringert wird

Das Erstellen von Transkripten oder deren Generierung durch einen Dienst wie Rev.com wird sich langfristig positiv auswirken. Die Frage ist nun: "Wo lege ich Transkripte ab?"

Platzierung von Transkriptinhalten

Wenn Sie Transkripte für Audioinhalte hinzufügen, finden Sie diese normalerweise in der Nähe der Audiosteuerelemente, normalerweise direkt darunter. Der Vorteil, den Text in unmittelbarer Nähe einzufügen, besteht darin, dass der Inhalt leicht auffindbar ist; Die Leute müssen nicht nach einem Link suchen, um die alternative Textversion zu lesen.

Sehen Sie sich zum Beispiel den Responsive Webdesign Podcast an. Jede Zielseite verfügt über einen nativen Audioplayer sowie die Nur-Text-Version des Podcast-Inhalts direkt darunter. Mit diesem Setup haben Benutzer die Wahl, den Podcast-Inhalt zu hören oder zu lesen.

Eine weitere Option für die Platzierung von Transkripten ist, wenn der Platz auf dem Bildschirm knapp ist oder Sie den Inhalt lieber vorübergehend "ausblenden" möchten, bis er vom Benutzer angefordert wird, implementieren Sie den Inhalt des Transkripts in einer "Anzeigen/Ausblenden"-Komponente. Erwägen Sie die Verwendung des Offenlegungselements für HTML- details für diese Komponente. Damit können Designer den Transkriptinhalt „verbergen“, und Endbenutzer können die Offenlegungskontrolle aktivieren und den Inhalt bei Bedarf lesen.

 <details> <summary> <h2>Transcript</h2> </summary> <p>Transcript content...</p> </details>

Ressourcen:

Zurück zum Blog