O atributo inert

Emma Twersky

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.

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 alcançar o mesmo comportamento em outros elementos.

Inert significa não ter a capacidade de se mover. Portanto, quando você marca algo como inerte, você 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. Portanto, todo o conteúdo contido nesse <div>, incluindo o botão e o rótulo, não pode receber foco nem 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 a capacidade de descoberta e a 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.

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 estiver aberta, por exemplo.

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

Armadilha de foco

O Focus trapping é um conceito central de boa acessibilidade de interface. Verifique se o foco do leitor de tela está em elementos de interface interativos e se ele está ciente de quando um elemento está bloqueando a interatividade. Isso também ajuda a limitar os leitores de tela maliciosos de alcançar uma sobreposição de página ou enviar um formulário acidentalmente enquanto o primeiro envio ainda está em processamento.

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 os elementos inert

Por padrão, não há indicação visual de que um subárvore está inativa. É recomendável marcar claramente quais partes do DOM estão ativas e quais estão inativas.

[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.