O atributo inert

O atributo inert é um atributo global do HTML que simplifica a remoção e a restauração de eventos de entrada do usuário para um elemento, incluindo eventos de foco e eventos de tecnologias adaptativas.

Compatibilidade com navegadores

  • Chrome: 102.
  • Edge: 102.
  • Firefox: 112
  • Safari: 15.5.

Origem

O comportamento inativo é o padrão em elementos de caixa de diálogo, como quando você usa showModal para abrir uma caixa de diálogo para que os usuários façam uma seleção e a removam da tela. Depois de abrir um <dialog>, o restante da página fica inativo. Por exemplo, não é mais possível clicar ou alternar para links.

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

Inerte significa não ter a capacidade de se mover. Portanto, quando você marca algo como inerte, remove o movimento ou a interação desses elementos do 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 nesse <div>, incluindo o botão e o rótulo, não pode receber foco ou ser clicado.

O atributo inert é especialmente útil para acessibilidade, principalmente para evitar o foco de captura.

Melhor acessibilidade

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

inert permite que os desenvolvedores removam um elemento da ordem de guias e da árvore de acessibilidade. Isso permite controlar a detectabilidade e a interatividade, além de criar padrões mais úteis e acessíveis.

Há dois casos de uso principais para aplicar inert a um elemento para permitir uma melhor acessibilidade:

  • Quando um elemento faz parte da árvore DOM, mas está fora da tela ou oculto.
  • Quando um elemento faz parte da árvore DOM, mas não é 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 para o usuário. Com inert, você pode garantir que, enquanto os elementos secundários da gaveta estiverem fora da tela, um usuário de teclado não possa interagir com ela acidentalmente.

(link em inglês)

Elementos DOM não interativos

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

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

Armazenamento de foco

O Focus trapping é um conceito central de boa acessibilidade de 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.

Com inert, você pode garantir que apenas o conteúdo detectável seja acessível. Isso é útil para:

  • Elementos de bloqueio, como uma caixa de diálogo modal, um menu de foco ou a navegação lateral.
  • Um carrossel com itens não ativos.
  • Conteúdo de formulário não aplicável (por exemplo, desfocar e desativar os campos "Endereço de entrega" quando a caixa de seleção "Mesmo que o 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 um subárvore está inativa. É 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 só vez. Por exemplo, usuários de leitores de tela, dispositivos pequenos ou com ampliações e até mesmo usuários que usam janelas pequenas podem não conseguir ver a parte ativa de uma página e ficar frustrados se as seções inertes não forem 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 adaptativas, isso também bloqueia a tabulação e a capacidade de descoberta. O navegador também pode ignorar a pesquisa de página e a seleção de texto no elemento.

O valor padrão de inert é false.