Videos brauchen Untertitel, Audio braucht ein Transkript, und nichts darf automatisch mit Ton starten

Gehörlosen und schwerhörigen Kundinnen und Kunden entgeht alles, was in einem Produktvideo nur gesprochen wird, und wer einen Screenreader nutzt, hört ihn bei automatisch abgespieltem Ton nicht mehr. Produktvideos enthalten oft genau die Details, die Menschen vom Kauf überzeugen.

Regel-ID
vs-media
Quelle
Validiscan-Prüfung
Auswirkung
Mittel
Korrekturstufe
MANUAL
auf Shopify, Shopware, WooCommerce und Magento
Status
wird ausgeführt

Was geprüft wird

Markiert Videoelemente ohne Untertitelspur, Audio ohne Link zu einem Transkript (1.2.1, 1.2.2) und Medien, die automatisch mit Ton abspielen (1.4.2). Ersetzt die axe-Regeln video-caption und no-autoplay-audio.

Die Prüfung liest bis zu 200 Elemente vom Typ video, audio, iframe, lite-youtube und lite-vimeo, dazu Medien, die verzögert in template-Elementen bereitliegen, etwa in Shopifys deferred-media. Verzögert geladene Medien werden an ihrem umschließenden Element gemeldet; ihr Autoplay zählt nicht.

Ein video gilt als untertitelt, wenn es ein track enthält, dessen kind captions oder subtitles lautet oder ganz fehlt. Ins Bild eingebrannte Untertitel erkennt die Prüfung nicht. Ein stummgeschaltetes Video, das ohne controls automatisch abspielt, gilt als dekorativ und landet bei „zu prüfen“.

Bei audio sucht die Prüfung nach einem Link, einer Schaltfläche oder einem summary, deren Text auf Englisch, Deutsch, Französisch, Spanisch oder Dänisch ein Transkript nennt. Gesucht wird nach oben bis zum nächsten section, article, main, aside, dialog oder zur nächsten Region; an einem umschließenden Element, das weitere Medien enthält, endet die Suche. Ohne Treffer ist Audio mit controls ein Befund; Audio ohne controls landet bei „zu prüfen“, es sei denn, es spielt automatisch mit Ton ab.

Nicht stummgeschaltete Medien ohne controls, die autoplay haben oder bereits abspielen, sind ein Befund zu 1.4.2. Einbettungen von YouTube, Vimeo, Wistia, Dailymotion und Vidyard landen bei „zu prüfen“. Aus Ergebnissen „zu prüfen“ macht der Scanner derzeit keine Befunde.

So wird es behoben

Ergänzen Sie jedes Produktvideo mit Sprache um Untertitel (eine <track kind="captions">-Datei oder Untertitel im Video), verlinken Sie neben Audioinhalten ein Transkript, und starten Sie Medien stumm oder nur auf Wunsch, mit sichtbaren Bedienelementen für Pause und Lautstärke.

WCAG-Erfolgskriterien

Abschnitte der EN 301 549

Der Abschnitt der EN 301 549 zu jedem Kriterium, je Version der Norm
WCAG-Kriterium Version 3.2.1 Version 4.1.1
1.2.1 9.1.2.1 9.1.2.1
1.2.2 9.1.2.2 9.1.2.2
1.4.2 9.1.4.2 9.1.4.2

Rezepte, die diese Regel aufführen

Diese Regel hat die Korrekturstufe MANUAL. In einem Projekt geht ein Befund dieser Regel den Weg MANUAL, und diese Rezepte werden darauf nicht angewendet.

Shopware: Rezept mute-autoplay

Vorher und nachher anzeigen (1)
mutes a seeded autoplaying background video; vs-media no longer reports autoplay Beispieldaten

Resources/views/storefront/block/cms-block-video.html.twig Änderungen an Resources/views/storefront/block/cms-block-video.html.twig: 1 hinzugefügt, 1 entfernt

Änderungen an Resources/views/storefront/block/cms-block-video.html.twig: 1 hinzugefügt, 1 entfernt
Zeile vorher Zeile nachher Änderung Code
9 9 <h2 class="cms-block-title">{{ block.title }}</h2>
10 10 <p class="cms-video-text">{{ block.text }}</p>
11 11 <div class="cms-element-video">
12 Entfernt <video class="cms-video" autoplay loop preload="none" width="1280" height="720" poster="{{ block.posterUrl }}">
12 Hinzugefügt <video class="cms-video" autoplay loop preload="none" width="1280" height="720" poster="{{ block.posterUrl }}" muted playsinline>
13 13 <source src="{{ block.videoUrl }}" type="video/mp4">
14 14 {% if block.captionsUrl %}
15 15 <track kind="captions" src="{{ block.captionsUrl }}" srclang="en" label="{{ 'general.captionsEnglish'|trans }}" default>

Beginnen Sie mit einem kostenlosen Check Ihres Shops.

Senden Sie die Adresse Ihres Shops. Validiscan scannt ihn und antwortet mit jedem Fehler, den der Scan nachweisen kann, jeweils mit der Seite und dem Code.

Kostenlosen Check anfordern

Oder schreiben Sie an info@validiscan.com.

Was der kostenlose Check umfasst und was nicht
Sie senden
die Adresse Ihres Shops
Gescannte Seiten
bis zu 15
Sie erhalten
jeden Fehler, den der Scan nachweisen kann, mit Seite und Code
In Ihrem Shop
nur öffentliche Seiten; keine Anmeldung, nichts gekauft, kein Formular abgeschickt
Was er nicht ist
ein vollständiges Audit

Nachricht an Validiscan

Für einen kostenlosen Check nennen Sie die Adresse Ihres Shops und seine Plattform.

Validiscan verwendet, was Sie senden, um Ihnen zu antworten. Datenschutzerklärung