O atributo inert

Emma Twersky

O inert é um atributo HTML global que simplifica como remover e restaurar eventos de entrada do usuário para um elemento, incluindo eventos de foco e de tecnologias adaptativas.

Inert é um comportamento padrão em elementos de caixa de diálogo, como quando você usa showModal para abrir uma caixa de diálogo em que os usuários fazem uma seleção e depois a dispensam da tela. Depois de abrir um <dialog>, o restante da página fica inerte. Por exemplo, não é mais possível clicar ou usar a tecla Tab para acessar links.

Você pode usar o atributo inert para ter o mesmo comportamento em outros elementos.

Inert significa não conseguir se mover, então, quando você marca algo inerte, você remove o movimento ou a interação desses elementos DOM.

<div>
  <label for="button1">Button 1</label>
  <button id="button1">I am not inert</button>
</div>
<div inert>
  <label for="button2">Button 2</label>
  <button id="button2">I am inert</button>
</div>

Aqui, inert foi declarado no segundo elemento <div> que contém button2, então todo o conteúdo neste <div>, incluindo o botão e o rótulo, não pode receber foco ou ser clicado.

O atributo inert é especialmente útil para acessibilidade, especialmente para evitar que o foco seja capturado.

Melhor acessibilidade

As Diretrizes de Acessibilidade para Conteúdo Web exigem gerenciamento de foco e uma ordem de foco sensata e utilizável. Isso inclui descoberta e interatividade. Anteriormente, a detecção poderia ser suprimida com aria-hidden="true", mas a interatividade era mais difícil.

O inert oferece aos desenvolvedores a capacidade de remover um elemento da ordem de tabulação e da árvore de acessibilidade. Isso permite que você controle tanto a descoberta quanto a interatividade, além de criar padrões mais utilizáveis e acessíveis.

Há dois casos de uso principais para aplicar inert a um elemento e melhorar a acessibilidade:

• Quando um elemento faz parte da árvore do DOM, mas fora da tela ou oculto.
• Quando um elemento faz parte da árvore do DOM, mas não deve ser interativo.

Elementos DOM ocultos ou fora da tela

Uma preocupação comum de acessibilidade é com elementos como uma gaveta, que adicionam elementos ao DOM que nem sempre são visíveis ao usuário. Com o inert, é possível garantir que, embora os subelementos da gaveta estejam fora da tela, um usuário do teclado não poderá interagir acidentalmente com ele.

Elementos DOM não interativos

Outra preocupação comum de acessibilidade é quando um design de IU é visível ou parcialmente visível, mas claramente não interativo. Isso pode acontecer durante o carregamento da página, enquanto um formulário é enviado ou quando uma sobreposição de caixas de diálogo está aberta, por exemplo.

Para oferecer a melhor experiência aos usuários, indique o estado da interface e a "armadilha" o foco para a parte da página que é interativa.

Armazenamento de foco

A retenção de foco é um conceito central de boa acessibilidade da interface. Você precisa garantir que o foco do leitor de tela esteja em elementos interativos da IU e ciente de quando um elemento está bloqueando a interatividade. Isso também ajuda a evitar que leitores de tela desonestos cheguem atrás de uma sobreposição de página ou enviem um formulário acidentalmente durante o primeiro envio.

Ao usar inert, você garante que o único conteúdo detectável esteja acessível. Isso é útil para:

• Elementos de bloqueio, como uma caixa de diálogo modal, menu de captura de foco ou navegação lateral.
• Um carrossel com itens inativos.
• Conteúdo de formulário não aplicável (por exemplo, desaparecer e desabilitar os campos "Endereço de entrega" quando a caixa de seleção "Igual ao endereço de faturamento" estiver marcada).
• Desativar toda a interface em um estado inconsistente.

Indicar visualmente elementos inert

Por padrão, não há indicação visual de que uma subárvore esteja inerte. É recomendado que você marque claramente quais partes do DOM estão ativas e quais estão inertes.

[inert], [inert] * {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
  user-select: none;
}

Nem todos os usuários podem ver todas as partes de uma página de uma vez. Por exemplo, usuários de leitores de tela, dispositivos pequenos ou com lupas, e até mesmo usuários que usam apenas janelas particularmente pequenas, podem não conseguir ver a parte ativa de uma página e podem ficar frustrados se as seções inertes não estiverem obviamente inertes. Para controles individuais, o atributo "desativado" provavelmente é mais apropriado.

Quais interações e movimentos são bloqueados?

Por padrão, inert bloqueia eventos de foco e clique. Para tecnologias assistivas, isso também bloqueia a tabulação e a descoberta. O navegador também pode ignorar a pesquisa na página e a seleção de texto no elemento.

O valor padrão de inert é false.