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 ele possa realizar ações.
Como testar manualmente
É importante testar apps de página única, principalmente quando se trata de gerenciar o foco do 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 rota busca novos dados para a área de conteúdo do <main>.
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 voltar à área <main>.
Quando isso acontecer, gerencie o foco do usuário para manter o contexto percebido em sincronia com o conteúdo visual do site.
Como corrigir
Para gerenciar o foco de um usuário em conteúdo novo em 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 fazer isso é atribuir ao título um tabindex de -1
e chamar o método focus() dele:
<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 adaptativas anunciam o novo título e a área de ponto de referência principal em que ele está contido.
Recursos
Código-fonte da auditoria O foco do usuário é direcionado para o novo conteúdo adicionado à página