Alterações de rota sem recarregar a página
Anuncie a navegação e mova o foco quando a rota mudar.
Alterações de rota sem recarregar a página é uma aula grátis de Web Accessibility Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Web Accessibility Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Web Accessibility Academy inclui 4 aulas no total.
O Problema da Navegação Silenciosa
Em uma SPA, clicar em um link troca o conteúdo sem recarregar a página inteira. Para um leitor de tela, parece que nada aconteceu, então ele permanece silencioso sobre a nova página. 🤫
Por que Recarregamentos Completos Eram Fáceis
Um carregamento real de página redefine o foco e faz o leitor de tela ler o novo título. O roteamento no lado do cliente ignora tudo isso, então você precisa recriar essas indicações.
Atualize o Título do Documento
A cada mudança de rota, defina document.title para corresponder à nova visualização. Muitos leitores de tela leem o título quando ele muda, ajudando os usuários a se orientarem.
useEffect(() => {
document.title = 'Settings - MyApp';
}, [location.pathname]);Mova o Foco Durante a Navegação
Após o roteamento, envie o foco para o topo do novo conteúdo, geralmente o cabeçalho principal. Isso informa aos usuários de teclado e de leitores de tela que a página mudou.
Coloque o Foco no Cabeçalho ou na Área Principal
Defina tabindex of -1 no alvo para que ele possa receber foco por script sem entrar na ordem de tabulação. Em seguida, chame .focus() depois que as atualizações da rota forem concluídas.
<h1 tabindex="-1" ref={headingRef}>Settings</h1>Anuncie com uma Região Dinâmica
Uma alternativa é uma região dinâmica visualmente oculta, que você preenche com um texto como Navegou para Configurações. O leitor de tela o anuncia sem mover o foco.
<div aria-live="polite" className="sr-only">{message}</div>Escolha uma Estratégia, não as Duas
Mover o foco e fazer um anúncio em uma região dinâmica funcionam. Fazer as duas coisas ao mesmo tempo pode causar anúncios duplicados; portanto, escolha uma abordagem por aplicativo e mantenha a consistência.
O momento é importante
Execute o foco ou o anúncio depois que a nova visualização for renderizada. No React, um efeito que depende do caminho da rota é executado assim que o DOM é atualizado.
Não remova o foco no meio da tarefa
Mova o foco somente quando houver uma mudança real de rota, não em pequenas atualizações no mesmo lugar. Roubar o foco enquanto alguém está realizando uma ação é desconcertante e confuso.
Bibliotecas de roteamento podem ajudar
Alguns roteadores expõem ganchos para mudanças de rota. O React Router oferece useLocation, para que um efeito reaja sempre que o caminho realmente mudar.
const location = useLocation();
useEffect(() => focusMain(), [location.pathname]);Teste como um usuário
Ative um leitor de tela, navegue pelos itens de navegação e escute. Se as mudanças de rota forem anunciadas e o foco for posicionado de maneira adequada, a navegação da SPA será acessível.
Verificação rápida
Um usuário de leitor de tela clica em um link de uma SPA, mas não ouve nenhuma mudança. Qual é a causa mais provável?
Recapitulação: anuncie a rota
A navegação de uma SPA é invisível até que você a torne audível. Atualize o título e, em seguida, mova o foco ou use uma região dinâmica para que todos saibam que a página mudou. ✅
Perguntas Frequentes
A aula “Alterações de rota sem recarregar a página” é grátis?
Sim — o texto completo de “Alterações de rota sem recarregar a página” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Web Accessibility Academy, atualize para CoddyKit PRO. O curso de Web Accessibility Academy inclui 4 aulas no total.
O que vou aprender em “Alterações de rota sem recarregar a página”?
Anuncie a navegação e mova o foco quando a rota mudar. Você pratica Web Accessibility Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Web Accessibility Academy?
Nenhuma experiência prévia é necessária. Web Accessibility Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “Alterações de rota sem recarregar a página”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Web Accessibility Academy?
Sim. Cada aula de Web Accessibility Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Alterações de rota sem recarregar a página
- Gerenciando o foco com refs e useEffect
- Fragmentos, portais e a armadilha da ordem no DOM
- jsx-a11y e proteções no nível dos componentes