El atributo inerte

Emma Twersky

El atributo inert es un atributo HTML global que simplifica la forma de quitar y restablecer los eventos de entrada del usuario para un elemento, incluidos los eventos de enfoque y los eventos de las tecnologías de accesibilidad.

Inerte es un comportamiento predeterminado en los elementos de diálogo, como cuando usas showModal para abrir un diálogo para que los usuarios realicen una selección y, luego, lo cierren de la pantalla. Después de abrir un <dialog>, el resto de la página se vuelve inerte. Por ejemplo, ya no puedes hacer clic en los vínculos ni desplazarte hasta ellos con la tecla Tab.

Puedes usar el atributo inert para lograr el mismo comportamiento en otros elementos.

Inerte significa carecer de la capacidad de movimiento, 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>

Aquí, inert se declaró en el segundo elemento <div> que contiene button2, por lo que todo el contenido que se encuentra dentro de este <div>, incluido el botón y la etiqueta, no puede recibir enfoque ni hacer clic en él.

El atributo inert es especialmente útil para la accesibilidad, en particular, para evitar la captura de enfoque.

Mejor accesibilidad

Los Lineamientos de accesibilidad para el contenido web requieren la administración del enfoque y un orden de enfoque sensible 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 les permite a los desarrolladores quitar un elemento del orden de tabulación y del árbol de accesibilidad. Esto te permite controlar la visibilidad y la interactividad, y te permite compilar patrones más utilizables y accesibles.

Existen dos casos de uso principales para aplicar inert a un elemento y permitir una mejor accesibilidad:

• Cuando un elemento forma parte del árbol del DOM, pero está oculto o está fuera de la pantalla.
• Cuando un elemento forma parte del árbol del DOM, pero no debe ser interactivo.

Elementos DOM fuera de la pantalla o ocultos

Una preocupación común de accesibilidad se relaciona con elementos como un panel lateral, que agregan elementos al DOM que no siempre son visibles para el usuario. Con inert, puedes asegurarte de que, mientras los subelementos del panel lateral están fuera de la pantalla, un usuario del teclado no pueda interactuar con ellos por accidente.

Elementos DOM no interactivos

Otro problema de accesibilidad común es cuando un diseño de IU es visible o parcialmente visible, pero claramente no es interactivo. Esto puede ocurrir durante la carga de la página, mientras se envía un formulario o si está abierta una superposición de diálogo, por ejemplo.

Para brindar 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

El atrapo 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 de que sepas cuándo un elemento bloquea la interactividad. Esto también ayuda a limitar que los lectores de pantalla no autorizados accedan a una superposición de página o que envíen un formulario por accidente mientras se está procesando el primer envío.

Con inert, puedes asegurarte de que solo se pueda acceder al contenido detectable. Esto es útil para lo siguiente:

• Bloquear elementos, como un diálogo modal, un menú de captura de enfoque o un panel lateral
• Un carrusel con elementos inactivos
• Contenido del formulario no aplicable (por ejemplo, inhabilitar los campos "Dirección de envío" y difuminarse cuando se marcó la casilla de verificación "Igual que la dirección de facturación"
• Inhabilitar toda la IU en estado incoherente.

Cómo indicar visualmente los elementos inert

De forma predeterminada, no hay una indicación visual de que un subárbol es inerte. Se recomienda que marques claramente qué partes del DOM están activas y cuáles están 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 a la vez. Por ejemplo, los usuarios de lectores de pantalla, dispositivos pequeños o con lupas, y hasta los usuarios que solo usan ventanas particularmente pequeñas, pueden no poder ver la parte activa de una página y frustrarse si las secciones inertes no son claramente inertes. En el caso de los controles individuales, es probable que el atributo inhabilitado sea más adecuado.

¿Qué interacciones y movimientos están bloqueados?

De forma predeterminada, inert bloquea los eventos de enfoque y clic. En el caso de las tecnologías de accesibilidad, esto también bloquea el uso de tabulaciones y la visibilidad. Es posible que el navegador también ignore la búsqueda de páginas y la selección de texto en el elemento.

El valor predeterminado de inert es false.