Les vidéos ont besoin de sous-titres, l’audio d’une transcription, et rien ne doit démarrer automatiquement avec le son
Les clients sourds ou malentendants manquent tout ce qui n’est dit qu’oralement dans une vidéo de produit, et les personnes qui utilisent un lecteur d’écran ne l’entendent plus par-dessus un son lancé automatiquement. Or les vidéos de produit contiennent souvent les détails qui décident à acheter.
- Identifiant de la règle
- vs-media
- Source
- Contrôle Validiscan
- Impact
- Modéré
- Niveau de correction
- MANUAL
- sur Shopify, Shopware, WooCommerce et Magento
- Statut
- exécutée
Ce que fait le contrôle
Signale les éléments vidéo sans piste de sous-titres, l’audio sans lien vers une transcription (1.2.1, 1.2.2) et les médias qui diffusent du son automatiquement (1.4.2). Remplace les règles axe video-caption et no-autoplay-audio.
Le contrôle lit jusqu’à 200 éléments video, audio, iframe, lite-youtube et lite-vimeo, ainsi que les médias différés dans des éléments template, comme le deferred-media de Shopify. Un média différé est signalé sur son élément englobant ; sa lecture automatique n’est pas prise en compte.
Un élément video est considéré comme sous-titré lorsqu’il contient un track dont kind vaut captions ou subtitles, ou qui n’a pas de kind. Les sous-titres incrustés dans l’image ne sont pas reconnus. Une vidéo en sourdine qui démarre automatiquement sans controls est considérée comme décorative et va dans « à examiner ».
Pour audio, le contrôle cherche un lien, un bouton ou un summary qui mentionne une transcription en anglais, en allemand, en français, en espagnol ou en danois, jusqu’à l’élément le plus proche parmi section, article, main, aside, dialog ou région, en s’arrêtant à un élément englobant qui contient d’autres médias. Sans lien de ce genre, un audio avec controls est un constat ; sans controls, il va dans « à examiner », sauf s’il démarre automatiquement avec du son.
Un média dont le son n’est pas coupé, sans controls, qui a autoplay ou qui est déjà en cours de lecture, donne un constat sur le critère 1.4.2. Les intégrations YouTube, Vimeo, Wistia, Dailymotion et Vidyard vont dans « à examiner ». Le scanner ne transforme pas aujourd’hui les résultats « à examiner » en constats.
Comment corriger
Ajoutez des sous-titres (un fichier <track kind="captions"> ou des sous-titres intégrés à la vidéo) à chaque vidéo de produit contenant de la parole, placez un lien vers une transcription à côté des contenus audio, et démarrez les médias en sourdine ou uniquement à la demande, avec des boutons de pause et de volume visibles.
Critères de succès WCAG
- 1.2.1 Audio-only and Video-only (Prerecorded), niveau A
- 1.2.2 Captions (Prerecorded), niveau A
- 1.4.2 Audio Control, niveau A
Clauses de la norme EN 301 549
| Critère WCAG | 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 |
Recettes qui énumèrent cette règle
Cette règle a le niveau MANUAL. Dans un projet, un constat de cette règle suit la voie MANUAL, et ces recettes ne lui sont pas appliquées.
Shopware : recette mute-autoplay
Afficher l’avant et l’après (1)
Resources/views/storefront/block/cms-block-video.html.twig Modifications apportées à Resources/views/storefront/block/cms-block-video.html.twig (lignes ajoutées : 1, lignes supprimées : 1)
| Ligne avant | Ligne après | Modification | 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 | Supprimée | <video class="cms-video" autoplay loop preload="none" width="1280" height="720" poster="{{ block.posterUrl }}"> | |
| 12 | Ajoutée | <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> |
Commencez par une vérification gratuite de votre boutique.
Envoyez l’adresse de votre boutique. Validiscan la scanne et vous envoie chaque échec que le scan peut prouver, avec sa page et son code.
Demander une vérification gratuiteOu écrivez à info@validiscan.com.
Ce que couvre la vérification gratuite, et ce qu’elle laisse de côté- Vous envoyez
- l’adresse de votre boutique
- Pages scannées
- jusqu’à 15
- Vous recevez
- chaque échec que le scan peut prouver, avec la page et le code
- Sur votre boutique
- pages publiques uniquement ; aucune connexion, aucun achat, aucun formulaire envoyé
- Ce qu’elle n’est pas
- un audit complet