How accessible is the HTML video player?

Wie zugänglich ist der HTML-Videoplayer?

Ein Teil meines Alltags besteht darin, mit Teams zusammenzuarbeiten, um Lösungen für Barrierefreiheit zu leiten und zu testen. Besonders mit unserem Debut-Theme (das hier in meinem Blog und Store läuft), an dem ich mit unserem Themes-Team gearbeitet habe, um eine leicht zugängliche Erfahrung für Stores zu gewährleisten, die dieses Theme ausführen. Alles, was hinzugefügt wird, muss vor dem Start auf Barrierefreiheit getestet werden.

Eine neue Funktion, die Shopify mit der Einführung beginnt, ist Video für Produkte . Videoinhalte zusammen mit Produktbildern helfen dabei, Produktdetails auf dynamische Weise zu präsentieren.

Für den Videoplayer haben wir uns entschieden, Plyr als Standard auszuliefern. Ich habe dem Team diese Empfehlung auf der Grundlage einiger wichtiger Kriterien gegeben:

  • Unterstützung mehrerer Plattformen; natives HTML, YouTube und Vimeo
  • Theme-fähig, um einen benutzerdefinierten Look zu haben, der sich in ein Storefront-Theme „einfügen“ lässt
  • Open Source (praktisch, wenn wir einige PRs senden) und schließlich
  • Plyr wurde im Hinblick auf Barrierefreiheit entwickelt

Andere benutzerdefinierte barrierefreie Videoplayer wurden in Betracht gezogen, unterstützten jedoch nicht alle von uns benötigten Funktionen.

Einige Leute haben nach weiteren Einzelheiten gefragt, warum wir uns für Plyr entschieden haben, im Gegensatz zum nativen HTML video .

„Inwiefern ist Plyr zugänglicher als native Player? Ist HTML video nicht bereits barrierefrei?“

Um diese Frage zu beantworten, habe ich mich daran gemacht, eine Reihe von Tests für die Barrierefreiheit von nativen video durchzuführen. Dazu gehörten verschiedene Betriebssysteme, Browser und Screenreader. Die Ergebnisse sind ziemlich genau das, was ich erwartet hatte.

Tl; Dr

Falls Sie es nicht bis ganz nach unten schaffen, denke ich, basierend auf den Ergebnissen des Testens jedes Players (und im Vergleich zu meinem eigenen Accessible Video Player -Projekt), dass das Vertrauen auf native Videoplayer mit Vorsicht verwendet werden sollte . Dies ist meine Meinung aus Erfahrung, aber ich fand, dass die meisten eine schlechte Tastatur- und Screenreader-Unterstützung haben, was zu frustrierten Benutzern führen kann.

Es gab viele Inkonsistenzen auf der ganzen Linie, was die Unterstützung von Tastatur und Screenreader betrifft. Einige verlieren den Fokus, wenn die Videosteuerung den Fokus erhält, und verblassen dann, wodurch der Benutzer gezwungen wird, sich neu zu positionieren, um die Wiedergabe anzupassen. Andere haben den Tastaturfokus im Vollbildmodus nicht gefangen, was zu einer ähnlichen Situation wie bei einem unzugänglichen modalen Fenster führte, das den Zugriff auf Inhalte "hinter" dem Fenster ermöglichte. Insbesondere ein Spieler zeigte eine sehr umständliche Tastaturunterstützung, bei der die Steuerelemente auf dem Bildschirm sichtbar waren, aber nicht fokussiert werden konnten.

Ich habe die eingebetteten Player von YouTube oder Vimeo nicht alleine getestet. Für unseren Fall, der mehrere Plattformen unterstützen musste, war es sinnvoll, Plyr nur als nicht-native Lösung zu testen.

Hier sind die Notizen zu meinen Ergebnissen, zuerst nur mit einer Tastatur und dann mit einem Screenreader für die Plattform.

Testdetails

  • Dies ist kein umfassender Test – nur die Tastatur- und Screenreader-Unterstützung wurde auf Barrierefreiheit geprüft
  • Browser/Screenreader-Kombinationen, die während des Tests verwendet wurden, werden am häufigsten verwendet ( Quelle )
  • Testprobe:
  • Test Umgebung:
    • Windows 10
    • macOS Mojave
    • iOS 13.2.3
    • Android 10
    • Chrom 79
    • Firefox71
    • InternetExplorer 11
    • Rand 44
    • KIEFER 2019.1909.28
    • NVDA 2019.2.1

Natives video – Nur Tastatur

macOS + Safari

  • ✅ Beginnt mit einem großen Play-Button
  • ✅ Video ist fokussierbar
  • ✅ Play-Taste ist fokussierbar
  • ❌ Fokusstil etwas schwer zu erkennen
  • ✅ Steuerelemente verblassen, wenn sie fokussiert sind, kehren Sie zu Tab zurück
  • ❌ Wiedergabe/Pause nicht möglich, wenn Video scharfgestellt ist
  • ❌ Wenn der Fokus der Untertitelsteuerung verloren geht (geht zurück zum Anfang des DOM)
  • ❌ Das Beschriftungsmenü erlaubt das Drücken der Tabulatortaste, dabei wird jedoch keine Auswahl bei Eingabe oder Leertaste getroffen – mit den Pfeiltasten zum Durchsuchen des Menüs kann eine Auswahl getroffen werden
  • ❌ Das Beenden des Vollbildmodus führt zu nicht funktionierenden Steuerelementen

macOS/Windows 10 + Chrome

  • ✅ Beginnt mit allen sichtbaren und verfügbaren Steuerelementen
  • ✅ Jedes Steuerelement ist fokussierbar
  • ✅ Das Menü kann mit der Tabulatortaste oder den Pfeiltasten verwendet werden
  • ✅ Scrubber unterstützt Pfeiltasten
  • ✅ Fokusstile gut sichtbar
  • ❌ Die Steuerung verschwindet während des Spielens, der Fokus geht verloren
  • ✅ Kann abspielen/anhalten, wenn das Videoelement fokussiert ist
  • ✅ Das Öffnen des CC-Menüs erfordert eine Auswahl, Pfeiltasten oder Esc , um fortzufahren
  • ✅ Beim Verlassen des Vollbildmodus wird der Fokus auf das aktuell ausgewählte Element gelenkt

macOS/Windows 10 + Firefox

  • ✅ Beginnt mit allen sichtbaren Steuerelementen
  • ❌ Videoelement , CC-Steuerung und Vollbildsteuerung sind die einzigen fokussierbaren Elemente
  • ❌ Das Menü kann mit Tabs durchgeblättert werden, befindet sich aber am Ende des DOM des Players
  • ✅ Scrubber unterstützt Pfeiltasten nach links/rechts, Lautstärketasten nach oben/unten
  • ❌ Fokusstile schwer zu erkennen
  • ❌ Die Bedienelemente verblassen während des Spielens, beim Tabbieren und kehren nicht zurück, es sei denn, die Lautstärke wird angepasst
  • ❌ Kann nur abspielen/pausieren , wenn das Videoelement fokussiert ist
  • ✅ Das Öffnen des CC-Menüs verhindert das Drücken der Tab-Taste außerhalb des Menüs, erzwingt Auswahl, Pfeiltasten oder Esc
  • ❌ Steuerelemente sind während der Vollbildwiedergabe nicht verfügbar
  • ❌ Beim Verlassen des Vollbildmodus geht der Fokus verloren

Windows 10 + Rand

  • ✅ Beginnt mit allen sichtbaren und verfügbaren Steuerelementen
  • ✅ Jedes Steuerelement ist fokussierbar, einschließlich abgelaufener/verbleibender Inhalte
  • ✅ Menü und Lautstärke erfordern die Verwendung der Pfeiltasten
  • ✅ Scrubber unterstützt Pfeiltasten
  • ❌ Fokusstile schwer zu erkennen
  • ✅ Bedienelemente verblassen nicht, wenn sie fokussiert sind
  • ✅ Kann abspielen/anhalten, wenn das Videoelement fokussiert ist
  • ✅ Beim Verlassen des Vollbildmodus wird der Fokus auf das aktuell ausgewählte Element gelenkt
  • ✅ Space pausiert das Video bei jedem Eingabefokus
  • ✅ Das Öffnen des CC-Menüs erfordert eine Auswahl, Pfeiltasten oder Esc , um fortzufahren

Windows 10 + IE11

  • ✅ Beginnt mit allen sichtbaren und verfügbaren Steuerelementen und wird schließlich ausgeblendet
  • ✅ Jedes Steuerelement ist fokussierbar, einschließlich abgelaufener/verbleibender Inhalte
  • ✅ Menü und Lautstärke erfordern die Verwendung der Pfeiltasten
  • ✅ Scrubber unterstützt Pfeiltasten
  • ❌ Fokusstile schwer zu erkennen
  • ✅ Bedienelemente verblassen nicht, wenn sie fokussiert sind
  • ✅ Kann abspielen/anhalten, wenn das Videoelement fokussiert ist
  • ✅ Beim Verlassen des Vollbildmodus wird der Fokus auf das aktuell ausgewählte Element gelenkt
  • ✅ Space pausiert das Video bei jedem Eingabefokus
  • ✅ Das Öffnen des CC-Menüs erfordert eine Auswahl, Pfeiltasten oder Esc , um fortzufahren

Natives video – Screenreader-Unterstützung

macOS + Safari + VoiceOver

  • ✅ Alle Bedienelemente verfügen über eindeutige Beschriftungen
  • ❌ Videocontainer hat keinen zugänglichen Namen
  • ❌ Wenn der Scrubber fokussiert ist, wird eine fortlaufende Ansage gemacht, die den Wert der verstrichenen Zeit angibt
  • ❌ Beim Interagieren mit Play, Mute usw. wird kein neues Label/Wert angesagt
  • ❌ Inhalte „hinter“ Vollbildvideos sind weiterhin zugänglich

iOS + Safari + VoiceOver

  • ✅ Alle Steuerelemente verfügen über eindeutige Beschriftungen nur per Finger ( ❌ Wischgesten zeigen keine Steuerelemente an)
  • ❌ Videocontainer hat keinen zugänglichen Namen
  • ❌ Wenn der Scrubber fokussiert ist, wird eine fortlaufende Ansage gemacht, die den Wert der verstrichenen Zeit angibt
  • ✅ Beim Interagieren mit Play, Mute usw. wird ein neues Label/ein neuer Wert angesagt
  • ✅ Inhalte „hinter“ Vollbildvideos sind nicht zugänglich

Android + Chrome + Talkback

  • ✅ Alle Bedienelemente verfügen über eindeutige Beschriftungen
  • ❌ Wenn das Video abgespielt wird, verblassen die Steuerelemente und kehren nicht zurück

Windows + Chrome + JAWS

  • ✅ Alle Bedienelemente verfügen über eindeutige Beschriftungen
  • ❌ Videocontainer hat keinen zugänglichen Namen
  • ❌ Wenn der Scrubber fokussiert ist, wird eine fortlaufende Ansage gemacht, die den Wert der verstrichenen Zeit angibt
  • ✅ Beim Interagieren mit Play, Mute usw. wird ein neues Label/ein neuer Wert angesagt
  • ✅ Inhalte „hinter“ Vollbildvideos sind nicht zugänglich

Windows + IE11 + JAWS

  • ❌ Steuerelemente werden bei Verwendung der Tabulatortaste nicht angekündigt
  • ❌ Videocontainer hat keinen zugänglichen Namen
  • ❌ Steuerelemente kündigen an, funktionieren jedoch nicht, wenn der virtuelle Cursor verwendet wird
  • ✅ Angekündigte und funktionale Steuerelemente nur beim Navigieren über die Formularsteuerelement-Navigation
  • ✅ Wenn der Scrubber im Fokus ist, wird eine Ansage gemacht, die nur den Zeitablaufwert angibt
  • ❌ Beim Interagieren mit Play, Mute usw. wird kein neues Label/Wert angesagt
  • ❌ Inhalte „hinter“ Vollbildvideos sind zugänglich

Windows + Firefox + JAWS

  • ❌ Einige Steuerelemente haben keine Beschriftung
  • ❌ Videocontainer hat keinen zugänglichen Namen
  • ❌ Es erfolgt eine kontinuierliche Ansage, die den abgelaufenen Prozentwert angibt, wenn ein Steuerelement den Fokus hat
  • ❌ Beim Interagieren mit Play, Mute usw. wird kein neues Label/Wert angesagt
  • ❌ Inhalte „hinter“ Vollbildvideos sind zugänglich

Windows + Chrome + NVDA

  • ✅ Alle Bedienelemente verfügen über eindeutige Beschriftungen
  • ❌ Videocontainer hat keinen zugänglichen Namen
  • ❌ Wenn der Scrubber fokussiert ist, wird eine fortlaufende Ansage gemacht, die den Wert der verstrichenen Zeit angibt
  • ✅ Beim Interagieren mit Play, Mute usw. wird ein neues Label/ein neuer Wert angesagt
  • ✅ Inhalte „hinter“ Vollbildvideos sind nicht zugänglich

Windows + IE11 + NVDA

  • ❌ Steuerelemente werden bei Verwendung der Tabulatortaste nicht angekündigt
  • ❌ Videocontainer hat keinen zugänglichen Namen
  • ❌ Steuerelemente wurden beim Navigieren über die Formularsteuerelement-Navigation nicht gefunden

Windows + Firefox + NVDA

  • ❌ Einige Steuerelemente haben keine Beschriftung
  • ❌ Videocontainer hat keinen zugänglichen Namen
  • ✅ Angekündigte und funktionale Steuerelemente beim Navigieren über die Formularsteuerungsnavigation
  • ❌ Es wird ein kontinuierliches Geräusch erzeugt, das den abgelaufenen Prozentwert angibt, wenn ein Steuerelement den Fokus hat
  • ✅ Beim Interagieren mit Play, Mute usw. wird ein neues Label/ein neuer Wert angesagt
  • ❌ Das Abspielen von Videos verliert manchmal den Zugriff auf die Tastensteuerung, Benutzer können nicht pausieren

Plyr – Nur Tastatur

Alle Browser

  • ✅ Beginnt mit einem großen Play-Button und allen sichtbaren Bedienelementen
  • ✅ Videocontainer ist fokussierbar
  • ✅ Play-Taste und alle Bedienelemente sind fokussierbar
  • ✅ Fokusstil gut sichtbar
  • ✅ Steuerelemente verblassen, wenn sie fokussiert sind, kehren Sie zu Tab zurück
  • ✅ Kann abspielen/anhalten, wenn der Videocontainer im Fokus ist
  • ✅ Beim Öffnen der Einstellungssteuerung wird der Fokus an das aktuelle Element gesendet, Esc sendet den Fokus zurück an die Einstellungssteuerung
  • ✅ Das Einstellungsmenü ermöglicht das Drücken der Tabulatortaste oder der Pfeiltasten
  • ✅ Space pausiert das Video bei jedem Eingabefokus (ohne Taste).
  • ✅ Beim Verlassen des Vollbildmodus wird der Fokus auf das aktuell ausgewählte Element gelenkt

Plyr – Screenreader-Unterstützung

macOS + Safari + VoiceOver

  • ✅ Alle Bedienelemente verfügen über eindeutige Beschriftungen
  • ✅ Die Wiedergabesteuerung enthält den Videotitel
  • ❌ Video-Container hat keinen zugänglichen Namen oder Rolle
  • ❌ Wenn der Scrubber fokussiert ist, wird eine fortlaufende Ansage gemacht, die den Wert der verstrichenen Zeit angibt
  • ❌ Beim Interagieren mit Play, Mute usw. wird kein neues Label/Wert angesagt
  • ❌ Inhalte „hinter“ Vollbildvideos sind weiterhin zugänglich
  • ✅ Stummschalten kündigt Wert an
  • ✅ Einstellungssteuerelemente werden von ARIA-Attributen für den Kontext begleitet

iOS + Safari + VoiceOver

  • ✅ Alle Bedienelemente verfügen über eindeutige Beschriftungen per Finger- und Wischgesten
  • ❌ Videocontainer hat keinen zugänglichen Namen
  • ❌ Wenn der Scrubber fokussiert ist, ist keine Anpassung möglich
  • ✅ Beim Interagieren mit Play, Mute usw. wird ein neues Label/ein neuer Wert angesagt
  • ❌ Inhalte „hinter“ Vollbildvideos sind weiterhin zugänglich

Android + Chrome + Talkback

  • ✅ Alle Bedienelemente verfügen über eindeutige Beschriftungen per Finger- und Wischgesten
  • ✅ Der Videocontainer hat einen zugänglichen Namen
  • ✅ Wenn Scrubber im Fokus ist, Anpassung über Lautstärkewippe
  • ❌ Beim Interagieren mit Play, Mute usw. wird kein neues Label/Wert angesagt
  • ❌ Inhalte „hinter“ Vollbildvideos sind weiterhin zugänglich
  • ❌ Der Fokus geht verloren, wenn Sie über die Beschriftungssteuerung hinaus wischen

Windows + Beliebiger Browser + NVDA

  • ✅ Alle Bedienelemente verfügen über eindeutige Beschriftungen
  • ✅ Die Wiedergabesteuerung enthält den Videotitel
  • ❌ Video-Container hat keinen zugänglichen Namen oder Rolle
  • ❌ Wenn der Scrubber fokussiert ist, wird eine fortlaufende Ansage gemacht, die den Wert der verstrichenen Zeit angibt
  • ❌ Beim Interagieren mit Play, Mute usw. wird kein neues Label/Wert angesagt
  • ❌ Inhalte „hinter“ Vollbildvideos sind weiterhin zugänglich
  • ✅ Stummschalten kündigt Wert an
  • ✅ Einstellungssteuerelemente werden von ARIA-Attributen für den Kontext begleitet
  • ❌ Bei der Interaktion mit Stumm, Einstellungen usw. kann der Fokus auf das Videoelement verloren gehen, die Steuerung wird nicht aktiviert

Windows + Beliebiger Browser + JAWS

  • ✅ Alle Bedienelemente verfügen über eindeutige Beschriftungen
  • ✅ Die Wiedergabesteuerung enthält den Videotitel
  • ❌ Video-Container hat keinen zugänglichen Namen oder Rolle
  • ❌ Wenn der Scrubber fokussiert ist, wird eine fortlaufende Ansage gemacht, die den Wert der verstrichenen Zeit angibt
  • ❌ Beim Interagieren mit Play, Mute usw. wird kein neues Label/Wert angesagt
  • ❌ Inhalte „hinter“ Vollbildvideos sind weiterhin zugänglich
  • ✅ Stummschalten kündigt Wert an
  • ✅ Einstellungssteuerelemente werden von ARIA-Attributen für den Kontext begleitet

Testabschluss

  • Native Videoplayer sind ziemlich uneinheitlich in ihrer Tastatur- und Screenreader-Unterstützung
  • Firefox scheint insgesamt die schlechteste Erfahrung zu machen
  • Plyr ist unsere Empfehlung und obwohl es viele Vorteile bietet, gibt es Raum für Verbesserungen – wir können bei Bedarf PRs senden
Zurück zum Blog