đź§± Atributo inert
no HTML — Bloqueio instantâneo de interface
🔍 O que é
O atributo inert
Ă© um recurso nativo do HTML usado para
tornar elementos da interface inativos — impedindo que recebam foco, cliques e sejam
lidos por leitores de tela.
É ideal para quando se deseja “congelar” parte do conteúdo, como o fundo de um modal,
drawer,
sidebar ou menu suspenso.
⚙️ Como funciona
- 🔒 Remove todos os elementos filhos da árvore de acessibilidade.
- 🚫 Impede que botões, links e inputs recebam foco ou cliques.
- đź§ Torna-se completamente invisĂvel para leitores de tela.
É como um modo desativado global, que pausa interações na seção especificada sem precisar esconder ou desativar cada elemento individualmente.
💡 Exemplo prático
<div id="app">
<main inert>
<h1>ConteĂşdo principal</h1>
<button>Não clicável</button>
</main>
<dialog open>
<p>Modal ativo!</p>
<button id="fechar">Fechar</button>
</dialog>
</div>
Enquanto o modal estiver aberto, toda a área <main>
está “travada”:
- NĂŁo aceita cliques;
- NĂŁo recebe foco ao usar TAB;
- É ignorada por leitores de tela.
🧠Comparativo com outras soluções
Técnica | Impede cliques | Remove do foco | Oculta da acessibilidade | Observações |
---|---|---|---|---|
pointer-events: none |
✅ | ❌ | ❌ | Bloqueia apenas o mouse |
aria-hidden="true" |
❌ | ❌ | âś… | AcessĂvel, mas nĂŁo bloqueia foco |
inert |
✅ | ✅ | ✅ | Solução completa e nativa |
🧩 Uso dinâmico com JavaScript
const modal = document.querySelector("#modal");
const app = document.querySelector("#app");
function abrirModal() {
app.setAttribute("inert", "");
modal.showModal();
}
function fecharModal() {
app.removeAttribute("inert");
modal.close();
}
Quando o modal é aberto, o restante da página (#app
) Ă© bloqueado.
Ao fechar, tudo volta ao normal.
🌍 Suporte dos navegadores
O atributo inert
Ă© amplamente suportado pelos navegadores modernos (Chrome, Edge, Firefox,
Safari e Opera).
Consulte a compatibilidade atualizada em:
Can I use inert
.
đź§ Quando usar
- Ao abrir modais ou popups;
- Durante carregamentos ou processos crĂticos;
- Em menus laterais (drawers);
- Para bloquear interações temporariamente sem remover elementos do DOM.
âś… ConclusĂŁo
O atributo inert
traz uma solução nativa, acessĂvel e limpa para gerenciar
estados de interface.
Ele elimina a necessidade de adicionar manualmente aria-hidden
, tabindex="-1"
e
pointer-events: none
, tornando o cĂłdigo mais simples e consistente, sem sacrificar a
acessibilidade.