Plano de fundo inerte e aria-modal
Torne o restante da página inacessível enquanto o modal estiver aberto.
Plano de fundo inerte e aria-modal é uma aula grátis de Web Accessibility Academy no CoddyKit. Esta é a aula 4 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.
A página atrás ainda existe
Mesmo com o foco preso, o conteúdo atrás do modal ainda está no DOM. Um leitor de tela pode acessá-lo, a menos que você o impeça.
Conheça o atributo inert
O atributo inert torna um elemento e todos os seus filhos incapazes de receber foco ou cliques e faz com que sejam ignorados pelas tecnologias assistivas de uma só vez.
<main inert>...page content...</main>Torne o plano de fundo inerte
Quando o modal abrir, adicione inert a tudo que estiver fora dele. Assim, ninguém poderá realmente acessar a página atrás.
pageContent.inert = true;Remova inert ao fechar
Quando o modal fechar, remova o atributo inert para que a página volte a ser interativa. Esquecer isso deixa a página congelada.
pageContent.inert = false;O dialog nativo faz isso por você
Um dialog nativo aberto com showModal() torna automaticamente inerte o restante da página, oferecendo essa proteção sem código adicional.
O que aria-modal declara
Adicionar aria-modal definido como true informa às tecnologias assistivas que o conteúdo fora desta caixa de diálogo não está disponível enquanto ela estiver aberta.
<div role="dialog" aria-modal="true">...</div>aria-modal é uma promessa, não uma barreira
Cuidado: aria-modal apenas informa o leitor de tela. Ele não bloqueia de fato o foco nem os cliques, portanto você ainda precisa de inert.
Use os dois juntos
O padrão robusto combina inert no plano de fundo com aria-modal na caixa de diálogo. Um impõe o limite; o outro anuncia esse limite.
<div role="dialog" aria-modal="true">
<!-- background gets inert -->O antigo truque aria-hidden
Antes de inert ter amplo suporte, os desenvolvedores usavam aria-hidden no plano de fundo. Isso ocultava o conteúdo dos leitores, mas não impedia o foco do teclado.
Nunca oculte a própria caixa de diálogo
Um erro clássico é aplicar aria-hidden de forma tão ampla que ele também abrange a caixa de diálogo. Certifique-se de que seu modal permaneça fora da região oculta.
Verifique na árvore
Abra a árvore de acessibilidade do navegador com o modal aberto. Confirme que a página atrás desapareceu dela e que somente a caixa de diálogo permanece. ✅
Verificação rápida
Você adiciona aria-modal=true, mas não usa inert. Qual problema continua existindo?
Recapitulação: isole o plano de fundo
Você aprendeu a tornar a página atrás inerte e a declarar aria-modal, para que o modal seja realmente a única coisa que os usuários possam acessar. 🎯
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 30
- Aulas
- 120
Perguntas Frequentes
A aula “Plano de fundo inerte e aria-modal” é grátis?
Sim — o texto completo de “Plano de fundo inerte e aria-modal” é 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 “Plano de fundo inerte e aria-modal”?
Torne o restante da página inacessível enquanto o modal estiver aberto. 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 4 de 4.
Quanto tempo leva a aula “Plano de fundo inerte e aria-modal”?
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