WCAG 1.4.2: Controle de áudio

O Que Esta Regra Significa

WCAG 1.4.2 — Controle de Áudio é um critério de sucesso de Nível A sob o princípio Perceptível. Ele afirma: Se qualquer áudio em uma página da Web for reproduzido automaticamente por mais de 3 segundos, deve estar disponível um mecanismo para pausar ou parar o áudio, ou um mecanismo para controlar o volume do áudio independentemente do nível de volume geral do sistema.

O critério é acionado por qualquer conteúdo de áudio que comece a tocar sem ação explícita do usuário e continue por mais de três segundos. Isso inclui música de fundo incorporada em uma página, vídeo com reprodução automática com trilha sonora audível, anúncios em áudio, efeitos sonoros em loop e introduções faladas que disparam no carregamento da página. A frase-chave é automaticamente — áudio que o usuário inicia deliberadamente (clicando em um botão de play, ativando um link) não é regido por esta regra.

Para atender a este critério, pelo menos uma das seguintes condições deve ser verdadeira:

• É fornecido ao usuário um controle de pausa ou parada que interrompe o áudio completamente ou o suspende até que o usuário o retome.
• É fornecido ao usuário um controle de volume que é independente do volume principal do sistema operacional, para que ele possa reduzir ou silenciar o áudio sem afetar outros aplicativos ou sons do sistema.

Um mecanismo que aparece apenas no topo da página e é acessível por teclado é aceitável, mas deve ser alcançável e operável antes que o áudio se torne disruptivo. A boa prática favorece fortemente colocar o controle como o primeiro elemento interativo na ordem de foco, para que usuários de teclado e leitores de tela o encontrem imediatamente.

A única exceção oficial definida nas WCAG é áudio que dura três segundos ou menos. Sons breves de notificação ou pequenos toques que param sozinhos são isentos. Não há exceção para áudio em volume baixo, áudio em loop ou áudio incorporado em widgets de terceiros — todos estes se enquadram na regra se forem reproduzidos automaticamente e excederem três segundos.

Por Que Isso Importa

Áudio com reprodução automática e sem controle cria barreiras significativas para vários grupos de pessoas com deficiência e até causa atrito para usuários sem deficiência em ambientes silenciosos ou compartilhados.

Usuários de leitores de tela são o grupo mais severamente impactado. Leitores de tela como JAWS, NVDA e VoiceOver produzem saída de fala sintética para transmitir o conteúdo da página. Quando uma página da web reproduz simultaneamente áudio de fundo ou a trilha sonora de um vídeo, os dois fluxos de áudio se sobrepõem. A voz do leitor de tela se torna difícil ou impossível de entender, efetivamente bloqueando o usuário da página até que ele consiga localizar e ativar um controle de parada — o que ele não consegue encontrar facilmente porque o leitor de tela não consegue ler a página por causa do ruído. De acordo com a Organização Mundial da Saúde, aproximadamente 2,2 bilhões de pessoas no mundo têm algum tipo de deficiência visual, e uma parte significativa depende de leitores de tela como sua principal ferramenta de navegação.

Usuários com deficiências cognitivas e de atenção, incluindo pessoas com TDAH, condições do espectro autista ou transtornos de ansiedade, podem achar o áudio inesperado extremamente desorientador ou angustiante. O início repentino de música ou fala pode quebrar a concentração, desencadear sobrecarga sensorial ou causar confusão sobre se o som faz parte do conteúdo da página ou é uma notificação externa.

Usuários com distúrbios de processamento auditivo ou aparelhos auditivos podem experimentar loops de feedback ou distorção amplificada quando o áudio é reproduzido em volumes inesperados por meio de dispositivos auditivos. O controle de volume independente permite que eles gerenciem seu ambiente de escuta sem ajustar configurações em todo o sistema que afetam outros aplicativos.

Usuários com deficiência motora que navegam por teclado ou por acesso com dispositivos de varredura precisam que o controle de parar/pausar seja alcançável pelo teclado e posicionado logicamente no início da estrutura da página. Se o controle só puder ser clicado com o mouse ou estiver enterrado tardiamente na ordem de tabulação, ele não oferece alívio prático durante o tempo necessário para navegar até ele.

Considere um cenário concreto: uma pessoa cega em busca de emprego visita a página de carreiras de uma empresa que reproduz automaticamente um vídeo promocional com música animada. A pessoa ativa o leitor de tela, que imediatamente começa a ler o título da página e a navegação. A música abafa completamente a síntese de fala. O botão de parada é uma <div> estilizada sem foco de teclado, posicionada visualmente no player de vídeo no meio da página. A pessoa não consegue alcançá-lo pelo teclado, não consegue ouvir o leitor de tela bem o suficiente para navegar de forma eficiente e, por fim, abandona a página. A empresa perde uma candidata ou um candidato qualificado e enfrenta potencial exposição legal.

Do ponto de vista de usabilidade e SEO, páginas com áudio de reprodução automática frequentemente apresentam taxas de rejeição elevadas, já que muitos usuários — com deficiência ou não — fecham as abas imediatamente quando o som inesperado começa. Os mecanismos de busca interpretam altas taxas de rejeição como um sinal negativo de qualidade, prejudicando indiretamente a capacidade de descoberta.

Regras Relacionadas do Axe-core

WCAG 1.4.2 exige testes manuais. Nenhuma regra automatizada do axe-core mapeia diretamente para este critério. A razão pela qual ferramentas automatizadas não conseguem detectar essa violação é fundamental para como navegadores e JavaScript funcionam:

• Iniciação dinâmica de áudio: O áudio pode ser acionado por temporizadores JavaScript, listeners de eventos ou scripts de terceiros que são executados após a análise inicial do DOM. Um scanner automatizado que inspeciona o DOM estático não pode determinar de forma confiável se o áudio será reproduzido automaticamente, por quanto tempo ou se um controle está funcionalmente conectado a essa fonte específica de áudio.
• Presença e operabilidade de controles: Um controle deslizante de volume ou botão de pausa pode existir no DOM, mas ser não funcional, estar oculto fora da tela ou inacessível a usuários de teclado. Ferramentas automatizadas podem detectar a presença de um elemento, mas não podem verificar se ativá-lo realmente interrompe o áudio sem executar a interação e ouvir um resultado — uma tarefa que exige julgamento auditivo humano.
• Limite de tempo: Determinar se o áudio é reproduzido por mais de três segundos exige uma avaliação baseada em tempo durante o carregamento da página, o que está fora do escopo de ferramentas de análise de DOM estático ou mesmo em tempo de execução.
• Incorporações de terceiros: Áudio incorporado por meio de iframes, SDKs de terceiros ou redes de anúncios pode não ser inspecionável pelo sandbox JavaScript da ferramenta de teste, tornando a detecção programática impossível.

Devido a essas limitações, auditores devem visitar pessoalmente as páginas, ouvir se há áudio com reprodução automática e verificar manualmente se os controles de pausa/parada/volume existem, são alcançáveis pelo teclado e funcionam corretamente.

Como Testar

1. Pré-varredura automatizada: Execute axe DevTools ou Google Lighthouse na página. Embora nenhuma das ferramentas sinalize diretamente uma violação de 1.4.2, elas destacarão problemas relacionados, como falta de foco de teclado em controles, elementos de players de mídia inacessíveis ou ausência de rótulos ARIA em widgets de áudio personalizados. Resolva esses problemas antes de iniciar o teste manual para não confundir questões distintas.
2. Detecção manual de áudio: Carregue a página com seus alto-falantes ou fones de ouvido ativos. Observe se algum áudio começa a tocar nos primeiros segundos sem qualquer interação do usuário. Se sim, use um cronômetro para confirmar se ele é reproduzido por mais de três segundos. Verifique todos os principais tipos de página: página inicial, landing pages, páginas de produto e qualquer página conhecida por conter incorporações de mídia ou espaços publicitários.
3. Localize o controle de parar/pausar/volume: Sem usar o mouse, pressione Tab imediatamente após o carregamento da página. Conte quantas paradas de tabulação ocorrem antes de você alcançar o controle de áudio. Verifique se o controle recebe um indicador de foco visível. Pressione Enter ou Space para ativá-lo e confirme se o áudio para ou se seu volume pode ser ajustado de forma independente.
4. Teste com leitor de tela usando NVDA e Firefox: Inicie o NVDA, abra o Firefox e navegue até a página. Permita que o áudio comece. Tente usar os comandos de leitura do NVDA (teclas de seta, cursor virtual) para localizar e ativar o controle de áudio. Confirme se o NVDA anuncia corretamente a função e o rótulo do controle (por exemplo, "Pausar áudio, botão") e se ativá-lo silencia o áudio concorrente.
5. Teste com leitor de tela usando VoiceOver e Safari (macOS/iOS): Ative o VoiceOver com Command + F5. Navegue até a página e deslize ou use as teclas de seta para encontrar o controle de áudio. Verifique se o VoiceOver pronuncia um rótulo significativo e se o controle funciona conforme o esperado. No iOS, teste também o comportamento de reprodução automática, já que navegadores móveis lidam com permissões de áudio de forma diferente.
6. Teste com leitor de tela usando JAWS e Chrome: Com o JAWS ativo, carregue a página no Chrome. Use a tecla Tab e a lista de controles de formulário do JAWS (Insert + F5) para localizar elementos interativos. Confirme se o controle de áudio aparece na lista e é operável.
7. Verificação de conteúdo de terceiros: Se a página contiver vídeos de redes sociais incorporados, unidades de anúncios ou conteúdo em iframe, carregue-os de forma independente quando possível e verifique se eles também estão em conformidade ou se a página hospedeira fornece um controle de substituição.
8. Verificação de independência de volume: Se a página oferecer um controle de volume em vez de um controle de pausa/parada, verifique se ajustar o controle de volume da página não altera o volume principal do sistema operacional. Abra outro aplicativo (por exemplo, um player de mídia local) e confirme se o volume dele permanece inalterado após operar o controle da página.

Como Corrigir

Áudio de fundo com reprodução automática e sem controles — Incorreto

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

Áudio de fundo com reprodução automática e controle de pausa acessível — Correto

<!-- 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. -->

Vídeo com reprodução automática, trilha sonora e sem controle de parada acessível por teclado — Incorreto

<!-- 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 -->

Vídeo com reprodução automática e controle de parada acessível — Correto

<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 áudio de terceiros incorporado com controle de volume independente — Correto

<!-- 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. -->

Erros Comuns

• Usar uma <div> ou <span> como botão de parada de áudio sem adicionar tabindex='0', um role='button' e handlers de eventos de teclado. Esses elementos são invisíveis para navegação por teclado e leitores de tela, tornando o controle inútil para as pessoas que mais precisam dele.
• Colocar o controle de áudio depois do conteúdo principal no DOM, de modo que usuários de teclado precisem percorrer dezenas de links e campos de formulário antes de alcançá-lo — quando o áudio já está tocando há um minuto ou mais. O controle deve ser o primeiro ou o segundo elemento focável na página.
• Silenciar o áudio com o atributo HTML muted por padrão e tratar isso como conformidade. Um elemento de áudio com reprodução automática e silenciado não é um controle operável pelo usuário; a pessoa não tem como saber que o áudio existe ou escolher sua própria preferência de volume.
• Fornecer um controle deslizante de volume que chama window.AudioContext.destination.gain e altera os níveis de áudio do sistema, em vez de ajustar apenas a propriedade .volume do elemento de mídia específico. Isso falha no requisito de independência.
• Presumir que navegadores móveis bloqueiam reprodução automática e, portanto, nenhum controle é necessário. Muitos navegadores móveis permitem reprodução automática quando o áudio está incorporado em um elemento de vídeo ou quando o usuário já interagiu com o domínio antes. Sempre implemente controles independentemente do comportamento presumido do navegador.
• Não atualizar o rótulo acessível do botão quando seu estado muda. Um botão rotulado como "Pause" que agora retoma o áudio deve atualizar seu aria-label para "Play" — caso contrário, usuários de leitores de tela ouvirão um anúncio incorreto e podem ativar a ação errada.
• Confiar apenas nos controles nativos de mídia do navegador (atributo controls) sem verificar se eles aparecem antes de o áudio com reprodução automática se tornar intrusivo. Controles nativos são renderizados abaixo do elemento de mídia, que pode estar abaixo da dobra, tornando-os inalcançáveis pelo teclado antes que ocorra uma interrupção significativa.
• Não testar com anúncios em áudio reproduzidos por meio de redes de anúncios. Espaços publicitários injetados dinamicamente após o carregamento da página fazem parte da experiência da página e estão sujeitos ao 1.4.2. Se a rede de anúncios não puder garantir conformidade, forneça um controle global de mudo para a página.
• Tratar a isenção de três segundos como uma brecha, dividindo uma faixa de áudio contínua em segmentos de menos de três segundos cada. A intenção das WCAG é clara: áudio que é reproduzido continuamente ou em loop está sujeito ao critério, independentemente de como é tecnicamente fragmentado.
• Não fornecer um indicador de foco visível no controle de áudio. Mesmo que o controle seja alcançável pelo teclado, usuários videntes que usam teclado não conseguem encontrá-lo se não houver anel de foco, violando tanto a intenção de usabilidade deste critério quanto a WCAG 2.4.7 (Foco Visível).

Relação com os Regulamentos de Acessibilidade da Turquia

A Circular Presidencial 2025/10 da Turquia, publicada no Diário Oficial nº 32933 em 21 de junho de 2025, estabelece requisitos obrigatórios de acessibilidade na web alinhados com a WCAG 2.2 para uma ampla gama de entidades públicas e privadas que operam na Turquia. WCAG 1.4.2 — Controle de Áudio é um critério de Nível A, colocando-o no nível mais fundamental de requisitos. A não conformidade com critérios de Nível A constitui uma falha básica sob a Circular.

A Circular determina prazos de conformidade da seguinte forma: instituições públicas devem alcançar conformidade total de Nível A dentro de um ano a partir da data de publicação da Circular, enquanto entidades do setor privado abrangidas pela regulamentação têm dois anos para se adequar.

Os seguintes tipos de entidades são explicitamente abrangidos pela Circular Presidencial e, portanto, são obrigados a atender à WCAG 1.4.2:

• Instituições públicas e órgãos governamentais em todos os níveis, incluindo ministérios, municípios e agências vinculadas ao Estado cujos serviços digitais são acessados pelo público.
• Plataformas de e-commerce que operam na Turquia, incluindo operadoras de marketplaces e varejistas online diretos ao consumidor.
• Bancos e instituições financeiras regulados pela legislação bancária turca, incluindo seus portais de internet banking, interfaces web móveis e páginas de produtos digitais.
• Hospitais e prestadores de serviços de saúde, incluindo grupos hospitalares privados e portais de saúde públicos onde pacientes agendam consultas, acessam prontuários ou recebem informações de saúde.
• Empresas de telecomunicações com 200,000 ou mais assinantes, cujos sites voltados ao cliente, portais de autoatendimento e páginas promocionais devem estar em conformidade.
• Agências de viagem e plataformas de viagem online que atendem consumidores na Turquia, incluindo motores de reserva e páginas de conteúdo sobre destinos.
• Empresas de transporte privado que fornecem serviços de venda de passagens e informações ao passageiro online.
• Escolas privadas autorizadas pelo Ministério da Educação Nacional (MoNE), incluindo seus portais de matrícula, sistemas de gestão de aprendizagem e sites informativos.

Para todas essas entidades, uma página que reproduz áudio automaticamente — seja um vídeo promocional na página inicial de um banco, uma trilha sonora de fundo em uma página de produto de e-commerce ou um clipe de notícias incorporado em um portal governamental — sem fornecer um controle de pausa ou volume acessível e alcançável pelo teclado representa uma violação direta tanto da WCAG 1.4.2 quanto das obrigações impostas pela Circular Presidencial 2025/10. As entidades abrangidas são fortemente aconselhadas a auditar todos os templates de página em busca de mídia com reprodução automática e implementar controles em conformidade bem antes do prazo aplicável, para evitar constatações regulatórias e atender a todas as pessoas usuárias de forma equitativa.