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
- 1.2.1 Audio-only and Video-only (Prerecorded), Stufe A
- 1.2.2 Captions (Prerecorded), Stufe A
- 1.4.2 Audio Control, Stufe A
Abschnitte der EN 301 549
| 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)
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
| 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 anfordernOder 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