El Atributo INERT

El atributo inert permite desactivar la interacción del usuario con un elemento y sus hijos, evitando que reciban eventos (como clics, focus o selección) y excluyéndolos del orden de tabulación. Es especialmente útil para mejorar la accesibilidad y gestionar componentes modales o menús. Aquí un tutorial completo:

¿Qué es inert?

• Propósito: Marca un elemento como "inerte", bloqueando su interacción y la de sus descendientes.

• Casos de uso:

  • Deshabilitar temporalmente secciones de la página (ej: fondo oscuro detrás de un modal).

  • Mejorar la navegación por teclado en componentes modales.

  • Evitar interacciones no deseadas durante transiciones o cargas.

Sintaxis Básica

Aplica el atributo inert directamente en el elemento:

<div inert>
  <button>Botón inactivo</button>
  <input type="text" placeholder="No se puede enfocar">
</div>

Efectos:

• Los elementos dentro del contenedor inert no pueden recibir focus, click u otros eventos.

• Son ignorados por lectores de pantalla (mejora la accesibilidad).

• El cursor se muestra como default (no como puntero).

Ejemplos Prácticos

Ejemplo 1: Modal con fondo inerte

HTML:

<!-- Fondo inerte cuando el modal está abierto -->
<div class="fondo" inert></div>

<!-- Modal activo -->
<div class="modal">
  <h2>Título del modal</h2>
  <button>Cerrar</button>
</div>

CSS:

.fondo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
}

Ejemplo 2: Menú desplegable inactivo

<nav inert>
  <ul>
    <li><a href="#">Enlace 1</a></li>
    <li><a href="#">Enlace 2</a></li>
  </ul>
</nav>

Compatibilidad con Navegadores

• Soportado en: Chrome 102+, Edge 102+, Safari 15.4+, Firefox (parcialmente).

• No soportado en: Navegadores antiguos (IE11, Chrome <102).

• Alternativas: Usar polyfills como inert-polyfill o simular el comportamiento con JavaScript.

Accesibilidad

• Lectores de pantalla: Ignoran elementos con inert, lo que evita anunciar contenido no relevante.

• Navegación por teclado: Los elementos inactivos se excluyen del orden de tabulación (tabindex="-1" implícito).

Combinar con JavaScript

Agrega o quita inert dinámicamente para controlar la interacción:

<button onclick="toggleInert()">Alternar inercia</button>
<div id="contenido">
  <input type="text" placeholder="Campo de texto">
</div>

<script>
  function toggleInert() {
    const contenido = document.getElementById("contenido");
    contenido.inert = !contenido.inert;
  }
</script>

Buenas Prácticas

Usar para componentes modales: Aplica inert al fondo cuando un modal está activo.

Evitar abusar: No uses inert en elementos críticos que deban ser accesibles permanentemente.

Probar en múltiples navegadores: Verifica el comportamiento y usa polyfills si es necesario.

Complementar con CSS: Aplica estilos para indicar visualmente el estado inerte.

[inert] {
  opacity: 0.6;
  cursor: not-allowed;
}

Errores Comunes

Error 1: Usar inert en elementos interactivos clave

<!-- Incorrecto: Bloquear un formulario completo -->
<form inert>
  <input type="text" required>
  <button>Enviar</button>
</form>

Error 2: Ignorar la retroalimentación visual

Los usuarios deben percibir claramente que una sección está inactiva (ej: opacidad reducida).

Alternativas con JavaScript

Si inert no está soportado, simula su comportamiento:

function desactivarElemento(elemento) {
  elemento.setAttribute("aria-hidden", "true");
  elemento.querySelectorAll("button, input, a").forEach(el => {
    el.setAttribute("tabindex", "-1");
    el.style.pointerEvents = "none";
  });
}

Conclusión

El atributo inert es una herramienta poderosa para gestionar la interacción y accesibilidad en componentes dinámicos. Al usarlo correctamente, mejoras la experiencia del usuario y garantizas que tu sitio sea inclusivo. ¡Inclúyelo en tu próximo modal o menú desplegable!