O atributo aria-live cria uma região dinâmica na sua página que pode ser usada para notificar usuários de leitores de tela sobre mudanças de conteúdo dinâmico na região dinâmica conforme elas ocorrem. Usos comuns de live regions incluem mensagens que são exibidas após uma ação ter sido realizada (como uma mensagem de erro ou confirmação), conteúdo que é atualizado periodicamente (como um ticker, marquee ou countdown timer) ou mensagens gerais de status (como atualizações sobre um processo). Como o foco de leitura para leitores de tela pode estar em apenas um lugar por vez, os usuários de leitores de tela não perceberão uma mudança de conteúdo se o foco deles estiver em outra parte da página. As regiões ao vivo permitem que usuários de leitores de tela sejam notificados automaticamente sobre mudanças que acontecem na página em tempo real. Sem uma região ao vivo, usuários de leitores de tela podem perder atualizações importantes de conteúdo disponíveis para usuários com visão, já que um usuário com visão tem a capacidade de escanear a página inteira. Existem três valores possíveis para este atributo, baseados na prioridade da informação. Se você definir aria-live com o valor assertive isso significa que a atualização é muito importante. Tem a maior prioridade, então o usuário deve ser notificado imediatamente. Isso significa que o leitor de tela interromperá qualquer anúncio que esteja fazendo no momento para anunciar a mudança de conteúdo na região ao vivo. Tais interrupções podem ser extremamente disruptivas, então o valor assertive deve ser usado apenas para notificações sensíveis ao tempo ou críticas.

<link rel="stylesheet" href="styles.css">

<div class="session-warning" aria-live="assertive">
  <p>Your session will expire in 30 seconds.</p>
</div>

<script src="index.js"></script>

.session-warning {
  background-color: #ffcc00;
  color: #000;
  font-family: system-ui, sans-serif;
  font-weight: 500;
  padding: 1em 1.5em;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.session-warning.visible {
  opacity: 1;
  transform: translateY(0);
}

.session-warning.fade-out {
  opacity: 0;
  transform: translateY(10px);
}

document.addEventListener("DOMContentLoaded", () => {
  const warning = document.querySelector(".session-warning");

  setTimeout(() => {
    warning.classList.add("visible");
  }, 100);

  setTimeout(() => {
    warning.classList.add("fade-out");
  }, 8000);

  warning.addEventListener("transitionend", () => {
    if (warning.classList.contains("fade-out")) {
      warning.remove();
    }
  });
});

O próximo valor em ordem de prioridade é polite. Esse valor significa que a atualização não é urgente, então o leitor de tela pode esperar até que qualquer anúncio atual seja finalizado ou até que o usuário pare de digitar antes de anunciar a atualização. A maioria das regiões dinâmicas usará o valor polite.

<link rel="stylesheet" href="styles.css">

<div class="upload-success" aria-live="polite">
  <p>File successfully uploaded</p>
</div>

<script src="index.js"></script>

.upload-success {
  background-color: #4caf50;
  color: #fff;
  font-family: system-ui, sans-serif;
  font-weight: 500;
  padding: 1em 1.5em;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.upload-success.visible {
  opacity: 1;
  transform: translateY(0);
}

.upload-success.fade-out {
  opacity: 0;
  transform: translateY(-10px);
}

document.addEventListener("DOMContentLoaded", () => {
  const success = document.querySelector(".upload-success");

  setTimeout(() => {
    success.classList.add("visible");
  }, 100);

  setTimeout(() => {
    success.classList.add("fade-out");
  }, 8000);

  success.addEventListener("transitionend", () => {
    if (success.classList.contains("fade-out")) {
      success.remove();
    }
  });
});

O valor de prioridade mais baixo para aria-live é off que significa que a atualização não será anunciada a menos que o conteúdo esteja em um elemento que atualmente tenha o foco do teclado. Na prática, esse valor quase nunca é usado, pois o caso de uso é muito restrito e não é implementado de forma consistente (se é que é) em leitores de tela. Se você precisar de regiões ao vivo, planeje usar polite para tudo exceto mensagens críticas que precisam de assertive. Também é importante notar que o atributo aria-live não é obrigatório se a informação atualizada estiver contida em um elemento com uma função ARIA de alert, log, marquee, status ou timer, pois essas funções já possuem valores padrão de aria-live. Mas o valor padrão pode ser alterado definindo explicitamente aria-live no elemento. Escolher o valor correto de aria-live depende da prioridade da informação atualizada. Se as atualizações forem urgentes, você deve notificar o usuário imediatamente com assertive. Mas você deve usar isso somente se as atualizações forem realmente urgentes porque interrupções súbitas podem potencialmente desorientar os usuários e afetar a experiência do usuário. Se a atualização puder esperar até que a tarefa atual seja concluída, você deve usar polite em vez disso. O atributo aria-live informa às tecnologias assistivas quando o conteúdo está mudando dinamicamente em uma página web. Isso ajuda usuários com deficiências a se manterem atualizados sobre anúncios e atualizações importantes. Ao usar aria-live de forma apropriada, você pode garantir que os usuários estejam cientes dessas atualizações com base na prioridade delas.