O Atributo inert

Desativar uma parte da página — um menu fora da tela, um passo inativo de um formulário multi-etapas, o conteúdo atrás de um modal — sempre exigiu resolver dois problemas ao mesmo tempo: impedir que o teclado e o mouse cheguem naqueles elementos, e esconder esse mesmo trecho dos leitores de tela. O atributo inert resolve os dois de uma vez, com uma única palavra no HTML.

O jeito antigo

Para desativar de verdade uma seção da página, era preciso combinar várias técnicas manualmente:

<nav id="menu-lateral" aria-hidden="true">
    <a href="/conta" tabindex="-1">Minha conta</a>
    <a href="/pedidos" tabindex="-1">Pedidos</a>
</nav>

aria-hidden some com o trecho para leitores de tela, mas não impede foco por teclado nem cliques — por isso era preciso adicionar tabindex="-1" em cada elemento focável manualmente, e ainda bloquear cliques via CSS (pointer-events: none) ou JavaScript. Esquecer um desses passos deixa a interface acessível de um jeito quebrado: um link "escondido" que o Tab ainda alcança, por exemplo.

Como funciona o inert

Basta adicionar o atributo booleano inert no elemento que deve ficar desativado:

<nav id="menu-lateral" inert>
    <a href="/conta">Minha conta</a>
    <a href="/pedidos">Pedidos</a>
</nav>

Com isso, o navegador cuida de tudo de uma vez: os links deixam de receber foco por Tab, cliques e toques não disparam mais eventos, e todo o subtree é removido da árvore de acessibilidade — exatamente como se tivesse aria-hidden="true", mas sem precisar declarar isso à parte. inert não altera a aparência visual do elemento; ele continua renderizado normalmente, só deixa de ser interativo.

Alternando via JavaScript

Além do atributo HTML, existe a propriedade inert correspondente no elemento, útil para ligar e desligar o estado dinamicamente:

const menu = document.getElementById('menu-lateral');
const botaoAbrir = document.getElementById('abrir-menu');
const botaoFechar = document.getElementById('fechar-menu');

botaoAbrir.addEventListener('click', () => {
    menu.inert = false;
    menu.classList.add('aberto');
});

botaoFechar.addEventListener('click', () => {
    menu.inert = true;
    menu.classList.remove('aberto');
});

Formulário multi-etapas

Um uso comum é desativar as etapas que ainda não estão visíveis num wizard, garantindo que o Tab não escape para campos escondidos por CSS:

<fieldset id="etapa-1">
    <legend>Dados pessoais</legend>
    <input type="text" placeholder="Nome">
</fieldset>

<fieldset id="etapa-2" inert>
    <legend>Endereço</legend>
    <input type="text" placeholder="Rua">
</fieldset>

Ao avançar para a próxima etapa, basta alternar qual fieldset tem inert, sem precisar desabilitar cada campo individualmente com disabled (o que, além de mais trabalhoso, também mudaria a aparência dos campos e os removeria do envio do formulário).

inert e o dialog modal

O próprio <dialog> aberto com showModal() se comporta de forma parecida com um inert aplicado ao restante da página: enquanto o modal estiver aberto, o Tab não escapa para o conteúdo por trás dele. Para overlays construídos manualmente — um painel lateral, um passo a passo guiado — aplicar inert no conteúdo principal enquanto o overlay estiver ativo reproduz esse mesmo comportamento sem precisar do elemento <dialog>.

Quando usar

• Conteúdo atrás de um overlay, painel lateral ou menu off-canvas construído sem <dialog>.
• Etapas inativas de um formulário multi-etapas ou wizard.
• Seções em estado de carregamento, evitando que o usuário interaja com dados desatualizados enquanto uma requisição está em andamento.
• Qualquer lugar que hoje combina aria-hidden, tabindex="-1" em cada filho e pointer-events: none só para simular esse mesmo efeito.

Cuidados

inert não é disabled: campos de formulário dentro de um elemento inert continuam sendo enviados normalmente se o formulário for submetido por outro caminho, já que o atributo só afeta interação e foco, não o valor do campo. Vale lembrar também que inert não deixa o elemento visualmente diferente — geralmente faz sentido combinar com um estilo de opacidade reduzida via CSS, usando o seletor [inert], para dar uma pista visual de que aquele trecho está temporariamente desativado.

[inert] {
    opacity: 0.5;
}

Compatibilidade

O suporte é amplo em todos os navegadores modernos desde 2023, o que torna o inert seguro para usar em produção na grande maioria dos projetos atuais.

caniuse

Conclusão

O inert substitui uma combinação frágil de aria-hidden, tabindex="-1" manual e bloqueio de cliques por um único atributo que o navegador garante estar sempre consistente. É uma dessas mudanças pequenas que eliminam uma classe inteira de bugs de acessibilidade que antes dependiam de lembrar de todos os passos manuais.