Descubriendo el atributo inert en HTML: Qué es, cómo usarlo y en qué se diferencia de aria-hidden.

En el mundo web, crear interfaces accesibles y funcionales es una prioridad cada vez más importante (Sobre todo para los años venideros). En este contexto, el atributo inert en HTML es una herramienta poderosa pero poco conocida que puede ayudar a manejar el enfoque del usuario y la interactividad en la página web. A continuación, explicaré qué es, para qué sirve, cómo funciona, sus características, compatibilidad con navegadores y sus diferencias con el atributo aria-hidden="true". Además, incluiré ejemplos prácticos de como usar este magnifico atributo.

¿Qué es el atributo inert?

El atributo inert es una característica nativa de HTML que permite deshabilitar la interacción y el enfoque en un elemento y todos sus descendientes dentro del DOM. Al aplicarlo a un elemento, este queda completamente inaccesible tanto para los usuarios a través del teclado, clics o cualquier otra interacción, como para los lectores de pantalla, evitando así que ese contenido sea anunciado.

En otras palabras, un elemento con inert actúa como si no existiera en la página desde el punto de vista de la interacción y accesibilidad por lo que resulta muy útil.

¿Para qué sirve el atributo inert?

El atributo inert es especialmente útil en situaciones donde se necesita ocultar temporalmente partes del contenido para evitar que interfieran con la experiencia del usuario. Algunos escenarios comunes incluyen:

1. Modales o ventanas emergentes (pop-ups): Cuando un modal está abierto, el contenido detrás de este debe ser inaccesible para evitar confusión y garantizar que el usuario permanezca enfocado en el modal.
2. Pasos en un formulario: En formularios con múltiples pasos, puedes deshabilitar los pasos no activos para evitar que los usuarios interactúen accidentalmente con ellos.
3. Contenido temporalmente irrelevante: Si se dispone de elementos que no deben ser interactuados o anunciados por lectores de pantalla en cierto estado de la página, se puede usar el atributo inert para gestionarlos.

Características principales del atributo inert

El atributo inert tiene varias características importantes a tener en cuenta:

1. Deshabilita interacciones por completo: Un elemento marcado con inert no responde a clics, toques, ni puede recibir enfoque mediante el teclado (por ejemplo, con la tecla Tab). Todos sus descendientes también quedan deshabilitados automáticamente (Fácil solución para anidamientos de Shadow-roots).
2. Afecta la accesibilidad: Los lectores de pantalla ignoran cualquier contenido dentro de un elemento con inert, lo que significa que ese contenido no será anunciado.
3. Soporte nativo y polifill: Aunque el atributo inert tiene un soporte creciente en navegadores modernos, aún no es universal. Sin embargo, existe un polifill oficial proporcionado por Google para garantizar su funcionamiento en navegadores no compatibles.
4. No modifica el DOM visual: A diferencia de ocultar elementos con display: none o visibility: hidden, el contenido con inert sigue siendo visible en la página, pero es completamente inaccesible.

Compatibilidad con navegadores

El atributo inert es compatible con los navegadores modernos más recientes, pero no en todos. Actualmente, es soportado de forma nativa en:

• Microsoft Edge (v102 y superiores)
• Firefox (v112 y superiores)
• Google Chrome y Android Chrome(v102 y superiores)
• Safari e IOS Safari (a partir de v15.5)

Compatibilidad con lectores de pantalla

La comprobación de a11ysupport.io sobre el atributo inert se ven las pruebas en verde, lo que significa que todas las pruebas son correctas. Las pruebas incluyen todos los lectores de pantalla principales y todas las principales tecnologías de control por voz.

Diferencias entre inert y aria-hidden="true"

A primera vista, el atributo inert puede parecer similar a aria-hidden="true", pero hay diferencias importantes entre ambos:

Funcionalidad:

• aria-hidden="true": Solo afecta la accesibilidad. Los lectores de pantalla ignoran el contenido, pero este sigue siendo interactivo y puede recibir enfoque mediante teclado o clics (A no ser que se deshabilite con tabindex=”-1” y disabled)
• inert: Desactiva tanto la accesibilidad como la interactividad. El contenido es completamente ignorado por los usuarios y los dispositivos de asistencia.

Propósito:

• aria-hidden se usa principalmente para controlar qué contenido es anunciado por los lectores de pantalla.
• inert está diseñado para bloquear la interacción completa en un área específica del DOM.

inert es una solución más completa para gestionar tanto la accesibilidad como la interactividad de los elementos en comparación con aria-hidden.

Ejemplos prácticos de uso del atributo inert

Ejemplo 1: Deshabilitar contenido detrás de un modal html.

<div id="overlay" inert>
  <p>Este contenido no es interactivo mientras el modal está abierta.</p>
</div>

<div id="modal">
  <p>Contenido de la modal.</p>
  <button>Cerrar modal</button>
</div>

Ejemplo 2: Deshabilitar pasos en un formulario html.

<div class="multistep" inert>
  <h2>Paso 1</h2>
  <p>Contenido del paso 1.</p>
  <button>Continuar al paso 2</button>
</div>

<div class="multistep">
  <h2>Paso 2 (Activo)</h2>
  <p>Contenido del paso 2.</p>
  <button>Continuar al paso 3</button>
</div>

Ejemplo 3: Ocultar diapositivas de un carousel que no están visibles hasta que no se muestren con los botones de anterior y siguiente.

<div role="region" class="carousel" aria-label="Productos patrocinados">
  <div class="slides">
    <div role="region" aria-labelledby="a1">
      <span id="a1">Diapositiva 1 de 3</span>
    </div>
    <div role="region" aria-labelledby="a2" inert>
      <span id="a2">Diapositiva 1 de 3</span>
    </div>
    <div role="region" aria-labelledby="a3" inert>
      <span id="a3">Diapositiva 1 de 3</span>
    </div>
  </div>
  <div class="controls">
    <button>Anterior diapositiva</button>
    <button>Siguiente diapositiva</button>
  </div>
</div>

Ejemplo 4: Deshabilitar elementos interactivos dentro de WebComponents donde tengamos varios Shadow-roots.

<composition-panel-xx inert></composition-panel-xx>

Al aplicar el atributo inert al WebComponent composition-panel-xx, todos los hijos descendientes, incluidos los que están dentro de otros shadow-root se quedan inertes.

Conclusión

Como diría el tío Ben a Peter Paker: “Un gran poder conlleva una gran responsabilidad”. El uso de este atributo se debe de usar con cuidado ya que a diferencia del aria-hidden=”true”, hace que ni si quiera el ratón ni el teclado pueda accionar los elementos focables que estén por debajo de este atributo.

Hay que asegurarse al 100% que su uso es correcto ya que podemos dejar no solo a las personas que usen lectores de pantalla o solo teclado sin poder interaccionar, sino a todo el mundo.

También hay que tener en consideración las versiones altas que requieren los navegadores para que funcione este atributo al igual que los lectores de pantalla, recomendaría usar tanto aria-hidden como inert.

En las ultimas actualizaciones de Chrome salta un mensaje de error por consola:

Magnifico error de chrome

Blocked aria-hidden on an element because its descendant retained focus. the focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert atribute instead, which will also prevent focus.

Esto es debido a que el foco se queda detrás de un elemento aria-hidden=”true” lanzandote este error, aunque posteriormente mandes el foco al nuevo elemento visible que debe de ser focable. Ya nos indican los de Chrome que deberíamos usar mejor el atributo inert en vez de aria-hidden=”true”.