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.

La inertización es un comportamiento predeterminado en los elementos de diálogo, como cuando se usa showModal para abrir un diálogo para que los usuarios seleccionen una opción y luego la descarten 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 ni presionar Tab para ir a los vínculos.

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

Inert significa carecer de la capacidad de moverse. Por eso, cuando se marca algo inerte, eliminas 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í, se declaró inert en el segundo elemento <div> que contiene button2, Por lo tanto, no se puede enfocar todo el contenido de este <div>, incluidos el botón y la etiqueta, ni se puede hacer clic en él.

El atributo inert es muy útil para la accesibilidad. especialmente para evitar la captura de enfoque.

Mejor accesibilidad

Los Lineamientos de accesibilidad para el contenido web requieren una administración del enfoque y un orden de enfoque razonable y utilizable. Esto incluye tanto la visibilidad como la interactividad. Anteriormente, la visibilidad podía ser suprimida con aria-hidden="true", pero la interactividad es más difícil.

inert les brinda a los desarrolladores la capacidad de quitar un elemento del orden de pestañas 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 a fin de mejorar la 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 debería ser no interactivo.

Elementos del DOM ocultos o fuera de la pantalla

Un problema de accesibilidad común es con elementos como un panel lateral, que agregan elementos al DOM que el usuario no siempre puede ver. Con inert, puedes garantizar que, mientras los elementos secundarios del panel lateral estén fuera de la pantalla, un usuario del teclado no pueda interactuar accidentalmente con ellos.

Elementos no interactivos del DOM

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

Para brindar la mejor experiencia a los usuarios, indica el estado de la IU y "trap" el enfoque en la parte de la página que es interactiva.

Ataque de enfoque

La captura de enfoque es un concepto central de una buena accesibilidad de la IU. Debes asegurarte de que el lector de pantalla se centre en los elementos interactivos de la interfaz de usuario y sea consciente de cuándo un elemento bloquea la interactividad. Esto también ayuda a evitar que los lectores de pantalla fraudulentos accedan detrás de una superposición de la página o envíen un formulario por accidente mientras se procesa el primer envío.

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

• Elementos de bloqueo, como un diálogo modal, un menú de captura de enfoque o navegación 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.

Indica visualmente los elementos inert

De forma predeterminada, no hay indicación visual de que un subárbol esté 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 al mismo tiempo. Por ejemplo, es posible que los usuarios de lectores de pantalla, dispositivos pequeños o con lupas, e incluso aquellos usuarios que solo usan ventanas particularmente pequeñas no puedan ver la parte activa de una página y podrían 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 asistencia, esto también bloquea el tabulación y la visibilidad. Es posible que el navegador también ignore la búsqueda de páginas y la selección de texto del elemento.

El valor predeterminado de inert es false.