El atributo inert es un atributo HTML global que simplifica la forma de quitar y restablecer eventos de entrada del usuario para un elemento, incluidos los eventos de enfoque y los eventos de tecnologías de accesibilidad.
El estado inerte es un comportamiento predeterminado en los elementos de diálogo, como cuando usas showModal para abrir un diálogo en el que los usuarios pueden seleccionar y, luego, descartarlo de la pantalla.
Después de abrir una <dialog>, el resto de la página se inerte, por ejemplo, ya no puedes hacer clic ni presionar Tab para ir a los vínculos.
Puedes usar el atributo inert para lograr el mismo comportamiento en otros elementos.
Inerte significa que no puede moverse, por lo que, cuando marcas algo inerte, quitas el movimiento o la interacción de esos elementos del 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>
En este caso, se declaró inert en el segundo elemento <div> que contiene button2, por lo que todo el contenido incluido en este <div>, incluidos el botón y la etiqueta, no puede recibir el enfoque ni se puede hacer clic en él.
El atributo inert es particularmente útil para la accesibilidad, en particular para evitar la captura de enfoque.
Mejor accesibilidad
Los Lineamientos de accesibilidad para el contenido web requieren administración del enfoque y un orden de enfoque razonable y utilizable. Esto incluye la visibilidad y la interactividad. Anteriormente, la visibilidad se podía suprimir con aria-hidden="true", pero la interactividad es más difícil.
inert brinda a los desarrolladores la capacidad de quitar un elemento del orden de tabulación y del árbol de accesibilidad. Esto te permite controlar la visibilidad y la interactividad, y habilita la capacidad de crear patrones más utilizables y accesibles.
Existen dos casos de uso principales para aplicar inert a un elemento a fin de mejorar la accesibilidad:
- Cuando un elemento es parte del árbol del DOM, pero está oculto o fuera de la pantalla.
- Cuando un elemento es parte del árbol del DOM, pero no debe ser interactivo.
Elementos del DOM ocultos o fuera de la pantalla
Un problema de accesibilidad común se da con elementos como un panel lateral, que agrega elementos al DOM que no siempre son visibles para el usuario.
Con inert, puedes asegurarte de que, mientras los elementos secundarios del panel lateral estén fuera de la pantalla, el usuario del teclado no pueda interactuar accidentalmente con ellos.
Elementos del DOM no interactivos
Otro problema de accesibilidad común es cuando el diseño de la IU es visible o parcialmente visible, pero claramente no es interactivo. Esto puede ocurrir, por ejemplo, cuando se carga la página, cuando se envía un formulario o cuando se abre una superposición de diálogo.
Para proporcionar la mejor experiencia a los usuarios, indica el estado de la IU y “atrapa” el enfoque en la parte de la página que es interactiva.
Captura de enfoque
La captura de enfoque es un concepto central de una buena accesibilidad de la IU. Debes asegurarte de que el enfoque del lector de pantalla esté en los elementos interactivos de la IU y sepa cuándo un elemento bloquea la interactividad. Esto también ayuda a evitar que los lectores de pantalla fraudulentos alcancen una superposición de página o envíen accidentalmente un formulario mientras aún se está procesando el primer envío.
Con inert, puedes asegurarte de que se pueda acceder al único contenido detectable. Esto es útil para lo siguiente:
- Bloquea elementos, como un diálogo modal, un menú de captura de enfoque o la navegación lateral.
- Un carrusel con elementos inactivos
- Contenido del formulario no aplicable (por ejemplo, inhabilitar fundido de salida e inhabilitar los campos de "Dirección de envío" cuando se marcó la casilla de verificación "Misma que la dirección de facturación").
- Inhabilitar toda la IU en un estado incoherente
Indica visualmente los elementos inert
De forma predeterminada, no hay una indicación visual de que un subárbol esté inerte. Se recomienda marcar claramente las partes del DOM que están activas y las inertes.
[inert], [inert] * {
opacity: 0.5;
pointer-events: none;
cursor: default;
user-select: none;
}
No todos los usuarios pueden ver todas las partes de una página al mismo tiempo. Por ejemplo, es posible que los usuarios de lectores de pantalla, dispositivos pequeños o lupas, e incluso los usuarios que solo usan ventanas particularmente pequeñas no puedan ver la parte activa de una página y se frustren si las secciones inertes no están claramente inertes. Es probable que el atributo inhabilitado sea más adecuado en el caso de los controles individuales.
¿Qué interacciones y movimientos se bloquean?
De forma predeterminada, inert bloquea los eventos de enfoque y clic. Para las tecnologías de accesibilidad, esto también bloquea las pestañas y la visibilidad. El navegador también puede ignorar la búsqueda de páginas y la selección de texto del elemento.
El valor predeterminado de inert es false.