Los vídeos necesitan subtítulos, el audio necesita una transcripción y nada debe reproducirse automáticamente con sonido
Los clientes sordos o con pérdida auditiva se pierden todo lo que solo se dice de viva voz en un vídeo de producto, y quienes usan un lector de pantalla no pueden oírlo por encima del sonido que se reproduce automáticamente. Los vídeos de producto suelen contener los detalles que convencen para comprar.
- ID de la regla
- vs-media
- Origen
- Comprobación de Validiscan
- Impacto
- Moderado
- Nivel de corrección
- MANUAL
- en Shopify, Shopware, WooCommerce y Magento
- Estado
- se ejecuta
Qué hace la comprobación
Señala elementos de vídeo sin pista de subtítulos, audio sin enlace a una transcripción (1.2.1, 1.2.2) y contenido multimedia que empieza a reproducir sonido automáticamente (1.4.2). Sustituye a las reglas de axe video-caption y no-autoplay-audio.
La comprobación lee hasta 200 elementos video, audio, iframe, lite-youtube y lite-vimeo, además del contenido multimedia diferido dentro de elementos template, como el deferred-media de Shopify. El contenido multimedia diferido se notifica en su elemento envolvente; su reproducción automática no cuenta.
Un video cuenta como subtitulado cuando contiene un track cuyo kind es captions o subtitles, o que no tiene kind. No se reconocen los subtítulos incrustados en el propio vídeo. Un vídeo silenciado que se reproduce automáticamente sin controls cuenta como decorativo y pasa a «pendiente de revisión».
En el caso de audio, la comprobación busca un enlace, un botón o un summary con la palabra «transcripción» en inglés, alemán, francés, español o danés, subiendo hasta la sección, el artículo, el contenido principal, el contenido complementario, el cuadro de diálogo o la región más cercanos, y se detiene en un elemento envolvente que contenga otro contenido multimedia. Si no lo encuentra, el audio con controls es un hallazgo; sin controls, pasa a «pendiente de revisión», salvo que se reproduzca automáticamente con sonido.
El contenido multimedia sin silenciar y sin controls que tiene autoplay o que ya se está reproduciendo es un hallazgo del criterio 1.4.2. Los contenidos incrustados de YouTube, Vimeo, Wistia, Dailymotion y Vidyard pasan a «pendiente de revisión». Hoy el escáner no convierte lo que está pendiente de revisión en hallazgos.
Cómo corregirlo
Añada subtítulos (un archivo <track kind="captions"> o subtítulos en el propio vídeo) a cada vídeo de producto con voz, enlace una transcripción junto al contenido de audio e inicie el contenido multimedia silenciado o solo a petición, con controles visibles de pausa y volumen.
Criterios de conformidad de las WCAG
- 1.2.1 Audio-only and Video-only (Prerecorded), nivel A
- 1.2.2 Captions (Prerecorded), nivel A
- 1.4.2 Audio Control, nivel A
Apartados de la norma EN 301 549
| Criterio de las WCAG | Versión 3.2.1 | Versión 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 |
Recetas que enumeran esta regla
Esta regla tiene el nivel MANUAL. En un proyecto, un hallazgo de esta regla sigue la vía MANUAL, y estas recetas no se le aplican.
Shopware: receta mute-autoplay
Mostrar el antes y el después (1)
Resources/views/storefront/block/cms-block-video.html.twig Cambios en Resources/views/storefront/block/cms-block-video.html.twig (líneas añadidas: 1; eliminadas: 1)
| Línea anterior | Línea nueva | Cambio | Código |
|---|---|---|---|
| 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 | Eliminada | <video class="cms-video" autoplay loop preload="none" width="1280" height="720" poster="{{ block.posterUrl }}"> | |
| 12 | Añadida | <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> |
Empiece con una revisión gratuita de su tienda.
Envíe la dirección de su tienda. Validiscan la escanea y le responde con cada fallo que el escaneo pueda demostrar, con la página y el código.
Solicitar revisión gratuitaO escriba a info@validiscan.com.
Qué cubre la revisión gratuita y qué deja fuera- Usted envía
- la dirección de su tienda
- Páginas escaneadas
- hasta 15
- Usted recibe
- todos los fallos que el escaneo puede demostrar, con la página y el código
- En su tienda
- solo páginas públicas; sin inicio de sesión, nada comprado, ningún formulario enviado
- Lo que no es
- una auditoría completa