Conteúdo Dinâmico: aria-live e Mensagens Importantes

Uma mensagem pode aparecer visualmente longe do foco. Sem uma pista programática, quem usa leitor de tela pode não perceber que algo mudou. Pense no botão "Adicionar ao carrinho": o foco continua nele, mas o total muda no cabeçalho.

<button id="adicionar" type="button">Adicionar café ao carrinho</button>
<p id="mensagem-carrinho" role="status" aria-atomic="true"></p>

let quantidade = 0;
const mensagem = document.querySelector('#mensagem-carrinho');

document.querySelector('#adicionar').addEventListener('click', () => {
  quantidade += 1;
  mensagem.textContent = `Café adicionado. Carrinho com ${quantidade} item(ns).`;
});

A atualização é anunciada sem mover o foco. A região já existia vazia antes da mudança, o que torna o anúncio mais confiável do que inserir uma região pronta e preenchida no mesmo instante.

polite para feedback comum

Use para mensagens que podem esperar o momento adequado, como "item adicionado" ou "salvo com sucesso".

assertive só quando realmente precisa interromper

aria-live="assertive" pode cortar o anúncio atual. Reserve para situações urgentes.

role="status" resolve muitos casos

<p role="status">3 resultados encontrados.</p>

role="status" já possui comportamento de live region educada. Para um erro urgente que impede a continuidade, role="alert" pode ser adequado. Não combine vários papéis e aria-live sem necessidade.

Carregamento também precisa de estado

<section id="resultados" aria-busy="true" aria-labelledby="titulo-resultados">
  <h2 id="titulo-resultados">Resultados</h2>
  <p role="status">Carregando resultados...</p>
</section>

Quando a requisição terminar, atualize o conteúdo, troque aria-busy para false e anuncie a quantidade encontrada. Evite anunciar cada linha recebida.

• Live region anuncia mudanças fora do foco.
• polite é a escolha segura para feedback comum.
• assertive fica para urgências reais.
• Menos é mais: anunciar cada atualização transforma informação em ruído.

Teste sem depender só da visão

Ative um leitor de tela, mantenha o foco no botão e execute a ação três vezes. Você deve ouvir uma mensagem curta por ação, com o total correto, sem ser levado para outra parte da página. Em seguida, teste ações rápidas para conferir se as mensagens continuam úteis em vez de se acumularem.

No próximo nó, vamos tratar um componente que exige cuidado especial com foco: diálogos modais.