Como e por que usar aria-live

Nota: apenas traduzi o texto abaixo e postei aqui.

O que acontece se você tiver um conteúdo que muda dinamicamente em sua página? Como screen readers informam ao usuário que o conteúdo mudou?

Por exemplo, imagine que você tenha um input para os usuários digitarem seus nomes. Abaixo dele, você tem um elemento que exibe "Olá {nome do usuário}!" em runtime enquanto digitam. Como um usuário de screen reader sabe sobre a mensagem no #app element?

<label for="name">Qual é seu nome?</label>
<input type="text" id="name">

<div id="app"></div>

De modo geral, screen readers não notarão ou anunciarão essas alterações, a menos que você lhes diga que precisam.

O aria-live attribute permite que os screen readers saibam que o conteúdo de um determinado element mudará dinamicamente e que eles devem prestar atenção a isso e anunciar essas mudanças.

Seu valor pode ser off (o mesmo que não usá-lo), assertive (no qual screen readers interrompem as ações do usuário para anunciar alterações) e polite (que diz ao screen reader para esperar até que o usuário termine de anunciar as atualizações).

De modo geral, devemos sempre usar polite.

Se atualizarmos nosso HTML para ficar assim, agora os screen readers anunciarão alterações no conteúdo do #app element.

<label for="name">Qual é seu nome?</label>
<input type="text" id="name">

<div id="app" aria-live="polite"></div>

Saúde,

Fonte

Newsletter de Go Make Things