WCAG 1.4.2: Control de audio

Qué Significa Esta Regla

WCAG 1.4.2 — Control de audio es un criterio de éxito de Nivel A bajo el principio de Perceptible. Establece: Si cualquier audio en una página web se reproduce automáticamente durante más de 3 segundos, debe existir un mecanismo disponible para pausar o detener el audio, o un mecanismo disponible para controlar el volumen del audio de forma independiente del nivel de volumen general del sistema.

El criterio se activa con cualquier contenido de audio que comience a reproducirse sin una acción explícita del usuario y continúe durante más de tres segundos. Esto incluye música de fondo incrustada en una página, video con reproducción automática y banda sonora audible, anuncios de audio, efectos de sonido en bucle e introducciones habladas que se disparan al cargar la página. La frase clave es automáticamente: el audio que la persona usuaria inicia deliberadamente (haciendo clic en un botón de reproducción, activando un enlace) no está regido por esta regla.

Para cumplir con este criterio, al menos una de las siguientes condiciones debe ser verdadera:

• Se proporciona a la persona usuaria un control de pausa o detención que detiene el audio por completo o lo suspende hasta que la persona usuaria lo reanude.
• Se proporciona a la persona usuaria un control de volumen que es independiente del volumen maestro del sistema operativo, de modo que pueda reducir o silenciar el audio sin afectar a otras aplicaciones ni a los sonidos del sistema.

Un mecanismo que aparece solo en la parte superior de la página y es accesible mediante teclado es aceptable, pero debe ser alcanzable y operable antes de que el audio se vuelva molesto. Las mejores prácticas recomiendan encarecidamente colocar el control como el primer elemento interactivo en el orden de enfoque para que las personas usuarias de teclado y lector de pantalla lo encuentren de inmediato.

La única excepción oficial definida en WCAG es el audio que dura tres segundos o menos. Los sonidos breves de notificación o campanillas cortas que se detienen por sí solos están exentos. No existe excepción para audio a bajo volumen, audio en bucle o audio incrustado en widgets de terceros: todos ellos están sujetos a la regla si se reproducen automáticamente y superan los tres segundos.

Por Qué Importa

El audio con reproducción automática sin control crea barreras significativas para múltiples grupos de personas con discapacidad, e incluso genera fricción para personas sin discapacidad en entornos silenciosos o compartidos.

Las personas usuarias de lectores de pantalla son el grupo más gravemente afectado. Lectores de pantalla como JAWS, NVDA y VoiceOver producen salida de voz sintética para transmitir el contenido de la página. Cuando una página web reproduce simultáneamente audio de fondo o la banda sonora de un video, los dos flujos de audio se superponen. La voz del lector de pantalla se vuelve difícil o imposible de entender, lo que en la práctica bloquea a la persona usuaria fuera de la página hasta que pueda localizar y activar un control de detención, lo cual no puede encontrar fácilmente porque el lector de pantalla no puede leer la página por encima del ruido. Según la Organización Mundial de la Salud, aproximadamente 2.2 mil millones de personas en todo el mundo tienen algún tipo de discapacidad visual, y una parte significativa depende de lectores de pantalla como su herramienta principal de navegación.

Las personas con discapacidades cognitivas y de atención, incluidas aquellas con TDAH, condiciones del espectro autista o trastornos de ansiedad, pueden encontrar el audio inesperado extremadamente desorientador o angustiante. La aparición repentina de música o voz puede romper la concentración, desencadenar sobrecarga sensorial o causar confusión sobre si el sonido forma parte del contenido de la página o es una notificación externa.

Las personas con trastornos del procesamiento auditivo o audífonos pueden experimentar bucles de retroalimentación o distorsión amplificada cuando el audio se reproduce a volúmenes inesperados a través de dispositivos auditivos. El control de volumen independiente les permite gestionar su entorno de escucha sin ajustar la configuración global del sistema que afecta a otras aplicaciones.

Las personas con discapacidad motriz que navegan con teclado o con acceso mediante pulsadores necesitan que el control de detención/pausa sea alcanzable con el teclado y esté posicionado lógicamente al principio de la estructura de la página. Si el control solo se puede hacer clic con el ratón o está enterrado al final del orden de tabulación, no ofrece alivio práctico durante el tiempo que lleva navegar hasta él.

Considere un escenario concreto: una persona ciega que busca empleo visita la página de carreras de una empresa que reproduce automáticamente un video promocional con música animada. La persona usuaria activa su lector de pantalla, que inmediatamente comienza a leer el título de la página y la navegación. La música ahoga por completo la síntesis de voz. El botón de detención es un <div> con estilo, sin enfoque de teclado, posicionado visualmente en el reproductor de video en el centro de la página. La persona usuaria no puede alcanzarlo con el teclado, no puede oír suficientemente bien su lector de pantalla como para navegar con eficacia y, en última instancia, abandona la página. La empresa pierde a una candidata o un candidato cualificado y se enfrenta a una posible exposición legal.

Desde la perspectiva de usabilidad y SEO, las páginas con audio de reproducción automática suelen registrar tasas de rebote elevadas, ya que muchas personas usuarias —con discapacidad o sin ella— cierran las pestañas inmediatamente cuando comienza un sonido inesperado. Los motores de búsqueda interpretan las tasas de rebote altas como una señal de calidad negativa, lo que perjudica indirectamente la capacidad de descubrimiento.

Reglas Relacionadas de Axe-core

WCAG 1.4.2 requiere pruebas manuales. Ninguna regla automatizada de axe-core se asigna directamente a este criterio. La razón por la que las herramientas automatizadas no pueden detectar esta infracción es fundamental para cómo funcionan los navegadores y JavaScript:

• Inicio dinámico del audio: El audio puede activarse mediante temporizadores de JavaScript, escuchas de eventos o scripts de terceros que se ejecutan después del análisis inicial del DOM. Un escáner automatizado que inspecciona el DOM estático no puede determinar de forma fiable si el audio se reproducirá automáticamente, durante cuánto tiempo o si un control está conectado funcionalmente a esa fuente de audio específica.
• Presencia y operatividad de los controles: Un control deslizante de volumen o un botón de pausa pueden existir en el DOM pero ser no funcionales, estar ocultos fuera de la pantalla o ser inaccesibles para las personas usuarias de teclado. Las herramientas automatizadas pueden detectar la presencia de un elemento, pero no pueden verificar que al activarlo realmente se detenga el audio sin ejecutar la interacción y escuchar un resultado, una tarea que requiere juicio auditivo humano.
• Umbral de tiempo: Determinar si el audio se reproduce durante más de tres segundos requiere una evaluación basada en el tiempo durante la carga de la página, lo cual está fuera del alcance de las herramientas de análisis del DOM estático o incluso en tiempo de ejecución.
• Contenido incrustado de terceros: El audio incrustado mediante iframes, SDK de terceros o redes de anuncios puede no ser inspeccionable por el sandbox de JavaScript de la herramienta de pruebas, lo que hace imposible su detección de forma programática.

Debido a estas limitaciones, las personas auditoras deben visitar personalmente las páginas, escuchar si hay audio con reproducción automática y verificar manualmente que existan controles de pausa/detención/volumen, que sean alcanzables con el teclado y que funcionen correctamente.

Cómo Probar

1. Preanálisis automatizado: Ejecute axe DevTools o Google Lighthouse en la página. Aunque ninguna de estas herramientas señalará directamente una infracción de 1.4.2, sí mostrarán problemas relacionados, como falta de enfoque de teclado en los controles, elementos de reproductores multimedia inaccesibles o ausencia de etiquetas ARIA en widgets de audio personalizados. Resuelva estos problemas antes de comenzar las pruebas manuales para no mezclar cuestiones distintas.
2. Detección manual de audio: Cargue la página con los altavoces o auriculares activos. Observe si algún audio comienza a reproducirse en los primeros segundos sin ninguna interacción de la persona usuaria. Si es así, use un temporizador para confirmar que se reproduce durante más de tres segundos. Revise todos los tipos principales de página: página de inicio, páginas de destino, páginas de producto y cualquier página que se sepa que contiene contenidos multimedia incrustados o espacios publicitarios.
3. Localizar el control de detención/pausa/volumen: Sin usar el ratón, presione Tab inmediatamente después de que la página se cargue. Cuente cuántas paradas de tabulación se producen antes de llegar al control de audio. Verifique que el control reciba un indicador de enfoque visible. Presione Enter o Espacio para activarlo y confirme que el audio se detiene o que su volumen puede ajustarse de forma independiente.
4. Prueba con lector de pantalla usando NVDA y Firefox: Inicie NVDA, abra Firefox y navegue a la página. Permita que el audio comience. Intente usar los comandos de lectura de NVDA (teclas de flecha, cursor virtual) para localizar y activar el control de audio. Confirme que NVDA anuncia correctamente la función y la etiqueta del control (por ejemplo, «Pausar audio, botón») y que al activarlo se silencie el audio que compite.
5. Prueba con lector de pantalla usando VoiceOver y Safari (macOS/iOS): Active VoiceOver con Command + F5. Navegue a la página y deslice o use las teclas de flecha para encontrar el control de audio. Verifique que VoiceOver pronuncie una etiqueta significativa y que el control funcione como se espera. En iOS, pruebe también el comportamiento de reproducción automática, ya que los navegadores móviles manejan los permisos de audio de manera diferente.
6. Prueba con lector de pantalla usando JAWS y Chrome: Con JAWS activo, cargue la página en Chrome. Use la tecla Tab y la lista de controles de formulario de JAWS (Insert + F5) para localizar los elementos interactivos. Confirme que el control de audio aparece en la lista y es operable.
7. Revisión de contenido de terceros: Si la página contiene videos de redes sociales incrustados, unidades de anuncios o contenido en iframes, cárguelos de forma independiente cuando sea posible y verifique que también cumplan, o que la página anfitriona proporcione un control de anulación.
8. Verificación de independencia del volumen: Si la página ofrece un control de volumen en lugar de un control de pausa/detención, verifique que ajustar el control de volumen de la página no cambie el volumen maestro del sistema operativo. Abra otra aplicación (por ejemplo, un reproductor multimedia local) y confirme que su volumen no se ve afectado después de operar el control de la página.

Cómo Corregir

Audio de fondo con reproducción automática sin controles — Incorrecto

<!-- Audio starts automatically with no visible or keyboard-accessible control -->
<audio src='background-music.mp3' autoplay loop></audio>

Audio de fondo con reproducción automática y control de pausa accesible — Correcto

<!-- Control is the first focusable element, announced properly by screen readers -->
<button id='audio-toggle' aria-label='Pause background music' aria-pressed='true' onclick='toggleAudio()'>
  Pause Music
</button>

<audio id='bg-audio' src='background-music.mp3' autoplay loop></audio>

<script>
  function toggleAudio() {
    var audio = document.getElementById('bg-audio');
    var btn = document.getElementById('audio-toggle');
    if (audio.paused) {
      audio.play();
      btn.setAttribute('aria-pressed', 'true');
      btn.setAttribute('aria-label', 'Pause background music');
      btn.textContent = 'Pause Music';
    } else {
      audio.pause();
      btn.setAttribute('aria-pressed', 'false');
      btn.setAttribute('aria-label', 'Play background music');
      btn.textContent = 'Play Music';
    }
  }
</script>

<!-- The native <button> element is keyboard-accessible by default.
     aria-pressed communicates toggle state to screen readers.
     aria-label updates dynamically to reflect current action. -->

Video con reproducción automática y banda sonora sin control de detención accesible por teclado — Incorrecto

<!-- The video autoplays with sound; the only stop control is a mouse-only overlay -->
<div class='hero-video-wrapper'>
  <video src='promo.mp4' autoplay loop></video>
  <div class='stop-btn' onclick='stopVideo()'>Stop</div>
</div>
<!-- Problem: <div> is not keyboard-focusable and has no role or label -->

Video con reproducción automática y control de detención accesible — Correcto

<div class='hero-video-wrapper'>
  <!-- Stop control appears first in DOM and focus order -->
  <button
    id='video-stop-btn'
    aria-label='Stop promotional video'
    onclick='stopVideo()'
  >
    Stop Video
  </button>

  <video id='promo-video' src='promo.mp4' autoplay loop muted='false'></video>
</div>

<script>
  function stopVideo() {
    var video = document.getElementById('promo-video');
    var btn = document.getElementById('video-stop-btn');
    video.pause();
    video.currentTime = 0;
    btn.disabled = true;
    btn.textContent = 'Video Stopped';
  }
</script>

<!-- Using a native <button> ensures keyboard access without additional ARIA.
     Placing the button before the video in DOM order puts it early in tab sequence. -->

Widget de audio de terceros incrustado con control de volumen independiente — Correcto

<!-- When a third-party widget auto-plays, provide a host-level mute control -->
<button
  id='mute-widget-audio'
  aria-label='Mute podcast player'
  aria-pressed='false'
  onclick='muteWidget()'
>
  Mute Podcast
</button>

<iframe
  id='podcast-frame'
  src='https://embed.example.com/podcast/ep42?autoplay=1'
  title='Episode 42: Web Accessibility Deep Dive'
  allow='autoplay'
></iframe>

<script>
  function muteWidget() {
    <!-- postMessage API used to communicate with cross-origin iframe player -->
    var frame = document.getElementById('podcast-frame');
    var btn = document.getElementById('mute-widget-audio');
    var isMuted = btn.getAttribute('aria-pressed') === 'true';
    frame.contentWindow.postMessage({ action: isMuted ? 'unmute' : 'mute' }, 'https://embed.example.com');
    btn.setAttribute('aria-pressed', String(!isMuted));
    btn.setAttribute('aria-label', isMuted ? 'Mute podcast player' : 'Unmute podcast player');
  }
</script>

<!-- Note: host-level volume/mute control satisfies 1.4.2 when
     the iframe player's own controls may be inaccessible. -->

Errores Comunes

• Usar un <div> o un <span> como botón de detención de audio sin añadir tabindex='0', un role='button' y controladores de eventos de teclado. Tales elementos son invisibles para la navegación con teclado y para los lectores de pantalla, lo que vuelve el control inútil para las personas usuarias que más lo necesitan.
• Colocar el control de audio después del contenido principal en el DOM, de modo que las personas usuarias de teclado deban tabular a través de docenas de enlaces y campos de formulario antes de llegar a él, momento en el que el audio ya se ha estado reproduciendo durante un minuto o más. El control debe ser el primer o segundo elemento enfocable en la página.
• Silenciar el audio con el atributo HTML muted por defecto y considerar que eso cumple la norma. Un elemento de audio con reproducción automática silenciado no es un control operable por la persona usuaria; esta no tiene forma de saber que existe audio ni de elegir su propia preferencia de volumen.
• Proporcionar un control deslizante de volumen que llama a window.AudioContext.destination.gain y cambia los niveles de audio del sistema, en lugar de ajustar solo la propiedad .volume del elemento multimedia específico. Esto incumple el requisito de independencia.
• Suponer que los navegadores móviles bloquean la reproducción automática y que, por lo tanto, no se necesita control. Muchos navegadores móviles permiten la reproducción automática cuando el audio está incrustado en un elemento de video o cuando la persona usuaria ha interactuado previamente con el dominio. Implemente siempre controles independientemente del comportamiento que se suponga del navegador.
• No actualizar la etiqueta accesible del botón cuando cambia su estado. Un botón etiquetado como «Pausar» que ahora reanuda el audio debe actualizar su aria-label a «Reproducir»; de lo contrario, las personas usuarias de lectores de pantalla escuchan un anuncio incorrecto y pueden activar la acción equivocada.
• Confiar únicamente en los controles multimedia nativos del navegador (atributo controls) sin verificar que aparezcan antes de que el audio con reproducción automática se vuelva intrusivo. Los controles nativos se renderizan debajo del elemento multimedia, que puede estar por debajo del pliegue, lo que los hace inalcanzables con el teclado antes de que se produzca una interrupción significativa.
• No realizar pruebas con anuncios que reproducen audio y se sirven a través de redes de anuncios. Los espacios publicitarios inyectados dinámicamente después de la carga de la página forman parte de la experiencia de la página y están sujetos a 1.4.2. Si la red de anuncios no puede garantizar el cumplimiento, proporcione un control global de silencio para la página.
• Tratar la exención de tres segundos como un resquicio legal dividiendo una pista de audio continua en segmentos de menos de tres segundos cada uno. La intención de WCAG es clara: el audio que se reproduce de forma continua o en bucle está sujeto al criterio independientemente de cómo se fragmente técnicamente.
• No proporcionar un indicador de enfoque visible en el control de audio. Incluso si el control es alcanzable con el teclado, las personas usuarias videntes que usan teclado no pueden encontrarlo si no hay un anillo de enfoque, lo que viola tanto la intención de usabilidad de este criterio como la WCAG 2.4.7 (Enfoque visible).

Relación con las Regulaciones de Accesibilidad de Turquía

La Circular Presidencial 2025/10 de Turquía, publicada en el Boletín Oficial n.º 32933 el 21 de junio de 2025, establece requisitos obligatorios de accesibilidad web alineados con WCAG 2.2 para una amplia gama de entidades públicas y privadas que operan en Turquía. WCAG 1.4.2 — Control de audio es un criterio de Nivel A, lo que lo sitúa en el nivel más fundamental de requisitos. La falta de conformidad con los criterios de Nivel A constituye un incumplimiento básico según la Circular.

La Circular establece los siguientes plazos de conformidad: las instituciones públicas deben lograr la conformidad total de Nivel A en el plazo de un año a partir de la fecha de publicación de la Circular, mientras que las entidades del sector privado cubiertas por la regulación disponen de dos años para cumplirla.

Los siguientes tipos de entidades están explícitamente cubiertos por la Circular Presidencial y, por lo tanto, deben cumplir con WCAG 1.4.2:

• Instituciones públicas y organismos gubernamentales en todos los niveles, incluidos ministerios, municipios y agencias afiliadas al Estado cuyos servicios digitales son accesibles al público.
• Plataformas de comercio electrónico que operan en Turquía, incluidos operadores de marketplaces y minoristas en línea directos al consumidor.
• Bancos e instituciones financieras regulados por la legislación bancaria turca, incluidos sus portales de banca en línea, interfaces web móviles y páginas de productos digitales.
• Hospitales y proveedores de servicios de salud, incluidos grupos hospitalarios privados y portales de salud públicos donde las personas pacientes programan citas, acceden a historiales o reciben información de salud.
• Empresas de telecomunicaciones con 200,000 o más suscriptores, cuyos sitios web de atención al cliente, portales de autoservicio y páginas promocionales deben cumplir.
• Agencias de viajes y plataformas de viajes en línea que prestan servicios a consumidores en Turquía, incluidos motores de reserva y páginas de contenido sobre destinos.
• Empresas de transporte privado que proporcionan servicios de venta de billetes e información para pasajeros en línea.
• Colegios privados autorizados por el Ministerio de Educación Nacional (MoNE), incluidos sus portales de inscripción, sistemas de gestión del aprendizaje y sitios web informativos.

Para todas estas entidades, una página que reproduce audio automáticamente —ya sea un video promocional en la página de inicio de un banco, una banda sonora de fondo en una página de producto de comercio electrónico o un clip de noticias incrustado en un portal gubernamental— sin proporcionar un control de pausa o volumen accesible y alcanzable con el teclado representa una violación directa tanto de WCAG 1.4.2 como de las obligaciones impuestas por la Circular Presidencial 2025/10. Se recomienda encarecidamente a las entidades cubiertas que auditen todas las plantillas de página en busca de contenido multimedia con reproducción automática e implementen controles conformes con suficiente antelación a su fecha límite aplicable para evitar hallazgos regulatorios y servir de manera equitativa a todas las personas usuarias.