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
Top comments (0)