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

Clauses de la norme EN 301 549

La clause de la norme EN 301 549 pour chaque critère, selon la version de la norme
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)
mutes a seeded autoplaying background video; vs-media no longer reports autoplay Données d’exemple

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)

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 gratuite

Ou é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

Écrire à Validiscan

Pour une vérification gratuite, indiquez l’adresse de votre boutique et sa plateforme.

Validiscan utilise ce que vous envoyez pour vous répondre. Politique de confidentialité