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 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 usar la tecla Tab para ir a ellos.

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

Inert significa que no tiene la capacidad de moverse, por lo que, cuando marcas algo como 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 incluye en 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 el atrapamiento 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, se podía suprimir la visibilidad 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 crear patrones más accesibles y fáciles de usar.

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á fuera de la pantalla o está oculto.
• 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 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

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, atenuación y desactivación de los campos "Dirección de envío" cuando se marca la casilla de verificación "Igual que la dirección de facturación")
• Inhabilitar toda la IU mientras se encuentra en un 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. Te recomendamos que marques claramente qué partes del DOM están activas y cuáles son 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. Para los controles individuales, el atributo inhabilitado es probablemente más apropiado.

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