El audio en los sitios web puede mejorar la experiencia del usuario, pero cuando se reproduce automáticamente sin control, puede resultar en una barrera de accesibilidad. Esto afecta especialmente a personas con discapacidades auditivas, usuarios de lectores de pantalla o cualquier persona en entornos donde no puede controlar el sonido de inmediato.
El fallo F23 ocurre cuando un sitio web reproduce un sonido de más de tres segundos sin proporcionar un mecanismo independiente para apagarlo. Esto incumple el criterio 1.4.2 – Control de Audio de WCAG 2.1, que busca garantizar que los usuarios puedan gestionar el sonido sin depender del control de volumen del sistema operativo.
Acerca de este fallo
Este fallo aplica a cualquier tecnología que reproduzca sonido automáticamente sin un mecanismo para detenerlo, incluyendo:
- Música de fondo en una página web, sin opción de pausa o detención.
- Narraciones automáticas que duran más de tres segundos sin un botón de apagado.
- Publicidad con audio que se activa sin previo aviso y no se puede silenciar.
Este problema afecta especialmente a:
- Usuarios de lectores de pantalla, que pueden tener dificultades para escuchar la salida de voz si hay sonido de fondo.
- Personas con hipersensibilidad auditiva o discapacidades cognitivas, que pueden sentirse abrumadas por sonidos inesperados.
- Usuarios en entornos públicos o compartidos, donde el sonido automático puede ser molesto o inadecuado.
Ejemplos
Ejemplo incorrecto 1
Escenario: Un sitio web de noticias reproduce automáticamente un podcast de bienvenida al abrir la página sin opción para detenerlo.
Código incorrecto:
<audio autoplay>
<source src="bienvenida.mp3" type="audio/mpeg">
</audio>🔴 Problema:
- No hay opción para detener el audio.
- Puede interferir con lectores de pantalla.
- Puede molestar a los usuarios en entornos públicos.
Solución correcta
Código corregido:
<audio id="audio-bienvenida" controls>
<source src="bienvenida.mp3" type="audio/mpeg">
</audio>✅ ¿Qué mejora?:
- Se agrega el atributo
controlspara permitir que el usuario detenga la reproducción. - Se evita la reproducción automática.
Ejemplo incorrecto 2
Escenario: Una página de comercio electrónico tiene música de fondo que no se puede detener.
Código incorrecto:
<audio autoplay loop>
<source src="musica-fondo.mp3" type="audio/mpeg">
</audio>🔴 Problema:
- La música se reproduce sin aviso y sin opción de apagarla.
- Puede interferir con otras funciones del sitio.
Solución correcta
Código corregido con opción de control:
<audio id="musica" loop>
<source src="musica-fondo.mp3" type="audio/mpeg">
</audio>
<button onclick="document.getElementById('musica').pause();">Apagar música</button>✅ ¿Qué mejora?:
- Se agrega un botón para pausar la música.
- Se mantiene la opción de reproducción sin obligar al usuario a escucharla.
Ejemplo correcto
Práctica ideal:
- No reproducir sonido automáticamente, sino permitir que el usuario lo active manualmente.
- Usar botones de control visibles y accesibles.
- Incluir descripciones accesibles para indicar cómo gestionar el audio.
Errores comunes y cómo evitarlos
Errores frecuentes:
- Reproducir sonido automáticamente sin opción de apagado.
- Usar
autoplaysin controles. - Incluir publicidad con audio sin botón de silencio.
Cómo evitar estos errores:
- Evitar el autoplay en audios largos.
- Proporcionar controles visibles y accesibles para apagar el sonido.
- Verificar la compatibilidad con lectores de pantalla.
Preguntas frecuentes
¿Por qué el sonido automático es un problema de accesibilidad?
Porque interfiere con lectores de pantalla y puede ser molesto para personas con hipersensibilidad auditiva.
¿Está prohibido usar sonido en sitios web?
No, pero debe ofrecerse control al usuario para activarlo o desactivarlo.
¿Cómo se soluciona este fallo en videos?
Usando el atributo controls en el elemento <video>.
¿Es suficiente bajar el volumen del sistema?
No, la WCAG exige un control independiente dentro de la página web.
¿Los anuncios con sonido también deben cumplir esta norma?
Sí, deben ofrecer una opción de silencio o no reproducirse automáticamente.
¿Cómo probar si mi sitio tiene este problema?
Cargando la página en un navegador y verificando si el audio se reproduce sin opción de apagado.
Recursos relacionados
- Guía oficial WCAG 2.1 para el fallo común F23: Fallo de 1.4.2 debido a la reproducción de un sonido de más de 3 segundos donde no hay ningún mecanismo para apagarlo
- Comprender el criterio de éxito 1.4.2 – Control de Audio
- Buenas prácticas en accesibilidad de audio
Pruebas y validación
Procedimiento
- Verificar la reproducción automática de sonido al cargar la página.
- Comprobar la presencia de controles visibles para pausar o detener el audio.
- Inspeccionar el código HTML para detectar el uso de
autoplayen elementos<audio>o<video>sin controles. - Probar en diferentes dispositivos y navegadores para asegurar que la opción de apagado funciona correctamente.
Resultados esperados
- ✅ Si la página no reproduce sonido automáticamente o permite apagarlo fácilmente, cumple con WCAG.
- ❌ Si el sonido se reproduce automáticamente sin opción de apagado, hay un fallo de conformidad.
El audio en un sitio web debe estar bajo el control del usuario. Evita la reproducción automática sin opción de apagado y mejora la accesibilidad de tu web. ¿Necesitas asesoría en accesibilidad? Contáctanos.