O inert é um atributo HTML global que simplifica a remoção e a restauração de eventos de entrada do usuário em 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 para que os usuários façam uma seleção e a dispensem 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.
Inerte significa não conseguir se mover. Portanto, ao marcar algo como 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,
de modo que todo o conteúdo 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,
em especial para evitar a captura de foco.
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. Antes, a detecção podia ser suprimida com aria-hidden="true", mas a interatividade era mais difícil.
inert oferece aos desenvolvedores a capacidade de remover um elemento da ordem de tabulação e da árvore de acessibilidade. Isso permite controlar a detecção e a interatividade, além de permitir a criação de padrões mais utilizáveis e acessíveis.
Há dois casos de uso principais para aplicar inert a um elemento para permitir melhor 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 fora da tela ou ocultos
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, é possível garantir que, enquanto os subelementos da gaveta estejam fora da tela, um usuário do teclado não possa interagir acidentalmente com eles.
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, durante o envio de um formulário ou se uma sobreposição de caixas de diálogo estiver aberta, por exemplo.
Para oferecer a melhor experiência aos usuários, indique o estado da interface e "trave" o foco para a parte da página que é interativa.
Captura de foco
A captura de foco é um conceito central de boa acessibilidade da interface. O foco do leitor de tela precisa estar em elementos interativos da IU e saber quando um elemento está bloqueando a interatividade. Isso também ajuda a impedir que leitores de tela maliciosos cheguem por trás de uma sobreposição de página ou enviem um formulário acidentalmente durante o processamento do primeiro envio.
Ao usar inert, você pode garantir que o único conteúdo detectável possa ser acessado. 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 não ativos.
- Conteúdo de formulário não aplicável (por exemplo, desaparecer e desativar 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.
Indique visualmente elementos inert
Por padrão, não há indicação visual de que uma subárvore esteja inerte. Recomendamos que você marque claramente quais partes do DOM estão ativas e quais sã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 lupas e até mesmo usuários que apenas usam 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 forem obviamente inertes. Para controles individuais, o atributo desativado provavelmente é mais apropriado.
Quais interações e movimentos são bloqueados?
Por padrão, o inert bloqueia eventos de foco e de clique. Para tecnologias assistivas, isso também bloqueia a funcionalidade de guias e a 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.