Sempre que um novo conteúdo for adicionado a uma página, tente garantir que o foco do usuário seja direcionado a esse conteúdo, para que possam tomar medidas.
Como testar manualmente
É importante testar apps de página única, especialmente quando se trata de gerenciar o foco de um usuário em novos conteúdos.
Normalmente, em um app de página única,
clicar em um link não causa uma atualização forçada.
Em vez disso, uma mudança de trajeto busca novos dados para a área de conteúdo do <main>.
Para usuários que enxergam,
isso funciona bem.
Mas os usuários que navegam com um leitor de tela ou outra tecnologia adaptativa
podem não saber que o novo conteúdo
foi adicionado à página.
Não há indicação de que eles precisam navegar
de volta para a área <main>.
Quando isso acontecer, gerencie o foco do usuário para manter o contexto percebido pelo usuário em sincronia com o conteúdo visual do site.
Como corrigir
Para gerenciar o foco de um usuário em relação ao conteúdo novo de uma página, encontre um bom título no conteúdo recém-carregado e direcione o foco para ele.
A maneira mais fácil de extrair isso é fornecer ao cabeçalho um tabindex de -1
e chamar o método focus():
<main>
<h2 tabindex="-1">Welcome to your shopping cart</h2>
</main>
<script>
// Assuming this gets called every time new content loads...
function onNewPage() {
var heading = document.querySelector('h2');
heading.focus();
// You can also update the page title :)
document.title = heading.textContent;
}
</script>
As tecnologias assistivas anunciam a nova direção e a área de referência principal em que ela está contida.
Consulte também Como gerenciar o foco para acessibilidade.
Recursos
Código-fonte da auditoria O foco do usuário é direcionado para o novo conteúdo adicionado à página