Escape para fechar e restaurar o foco
Ofereça uma saída confiável que devolva a pessoa ao ponto anterior.
Escape para fechar e restaurar o foco é uma aula grátis de Web Accessibility Academy no CoddyKit. Esta é a aula 3 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.
Todo modal precisa de uma saída
Um modal do qual não é possível sair é uma armadilha. Os usuários esperam uma maneira rápida e confiável de fechá-lo, sem precisar procurar um botão minúsculo.
Escape é a tecla universal
A tecla Escape é o atalho convencionado para fechar uma caixa de diálogo. Usuários do teclado e de leitores de tela recorrem primeiro a ela, portanto ofereça sempre esse suporte.
O dialog nativo trata Escape
Um dialog nativo aberto com showModal() fecha ao pressionar Escape automaticamente, disparando um evento cancel que você pode escutar se necessário.
dialog.addEventListener('cancel', onClose);Configure Escape por conta própria
Para um modal personalizado, escute o evento keydown e feche quando a tecla for Escape. São poucas linhas, mas nunca deixe isso de fora.
if (e.key === 'Escape') closeModal();Lembre-se de onde estava o foco
Antes de abrir o modal, salve o elemento que tinha o foco. document.activeElement é o acionador ao qual você retornará depois.
const opener = document.activeElement;Restaure o foco ao fechar
Quando o modal fechar, envie o foco de volta ao acionador salvo. Essa etapa de restauração do foco faz com que o fechamento pareça contínuo.
closeModal();
opener.focus();Por que restaurar é importante
Sem a restauração, o foco salta para o topo da página. O usuário perde seu lugar e precisa pressionar Tab várias vezes para voltar. É frustrante e pode ser evitado. 😕
Inclua também um botão de fechar visível
Escape não basta por si só. Ofereça um botão de fechar claramente identificado, para que usuários de mouse e toque também tenham uma saída óbvia.
<button aria-label="Close dialog">×</button>Clicar no plano de fundo
Muitos modais também fecham quando você clica no plano de fundo escurecido. É um recurso adicional interessante, mas nunca deve substituir Escape ou o botão.
Tenha cuidado com ações destrutivas
Para caixas de diálogo que confirmam algo arriscado, você pode impedir o fechamento rápido, para que um Escape acidental não ignore uma escolha importante.
Teste o ciclo completo
Abra usando o teclado, pressione Escape e confirme que o foco retorna exatamente ao acionador de onde você começou. Esse percurso de ida e volta é o objetivo. ✅
Verificação rápida
Um usuário abre um modal a partir de um botão e pressiona Escape. Onde o foco deve ficar?
Recapitulação: feche corretamente
Você aprendeu a oferecer suporte a Escape, disponibilizar um botão de fechar visível e restaurar o foco ao acionador, para que o fechamento nunca deixe o usuário perdido. 🎯
Perguntas Frequentes
A aula “Escape para fechar e restaurar o foco” é grátis?
Sim — o texto completo de “Escape para fechar e restaurar o foco” é 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 “Escape para fechar e restaurar o foco”?
Ofereça uma saída confiável que devolva a pessoa ao ponto anterior. 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 3 de 4.
Quanto tempo leva a aula “Escape para fechar e restaurar o foco”?
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
- Papéis de diálogo e o elemento nativo dialog
- Prendendo o foco dentro do modal
- Escape para fechar e restaurar o foco
- Plano de fundo inerte e aria-modal