El atributo HTML inert: Cómo hacer que una zona sea inactiva para una navegación más accesible
Crear un sitio web moderno a menudo requiere mostrar elementos que se superponen, como ventanas emergentes (modales) o menús que se deslizan lateralmente. Pero surge una pregunta: ¿cómo estar seguro de que el usuario no hará clic en un botón que quedó “detrás” o navegará con su teclado en una zona que ya no ve?
Durante mucho tiempo, esta tarea sencilla fue una pesadilla para los desarrolladores. Había que escribir scripts de
JavaScript muy largos y complicados para evitar que el cursor se moviera por cualquier parte. Hoy en día, existe una
solución mucho más simple e integrada directamente en el lenguaje HTML: el atributo inert.
En esta guía, veremos cómo esta pequeña herramienta permite que tus sitios sean más rápidos, ligeros y, sobre todo, mucho más sencillos de usar para las personas con discapacidad.
¿Qué es exactamente el atributo inert?
La palabra “inerte” significa que no se mueve, que no actúa. En programación web, cuando añadimos el atributo inert a
una parte de la página (un div, una section o un main), le decimos al navegador que considere que esa zona ya no
existe para el usuario.
No es solo un cambio visual. Es una puesta en “modo sueño” profunda del elemento. Aquí están los tres efectos principales que produce de inmediato:
- Ya no se puede hacer clic: Todos los enlaces, botones o formularios presentes en la zona se vuelven imposibles
- de clicar con el ratón o tocar en una pantalla táctil.
- El teclado lo ignora: Si un usuario utiliza la tecla “Tab” para pasar de un enlace a otro, el navegador saltará
- directamente toda la parte marcada como
inert. Es una ayuda inmensa para las personas con dificultades motoras. - Los lectores de pantalla callan: Los programas que utilizan las personas ciegas ignoran totalmente el contenido
- de la zona. Esto evita que se lea información que no es relevante en ese momento.
Un enfoque radicalmente simple
A diferencia de los métodos antiguos que obligaban a modificar cada botón uno por uno, inert se aplica a un elemento
padre. Si pones una caja en estado “inerte”, todo lo que hay dentro también lo estará automáticamente. Esto es lo que
llamamos propagación en cascada.
¿Por qué es una revolución para la accesibilidad?
Para un usuario que ve bien y usa un ratón, es fácil entender que no debe clicar en lo que está detrás de una ventana abierta. Pero para una persona con discapacidad, la situación es distinta.
Proteger al usuario de los “errores de navegación”
Imagina a una persona ciega que abre un menú de navegación en su smartphone. Si el desarrolleur no ha desactivado el resto de la página, el lector de pantalla seguirá ofreciendo los enlaces del pie de página o los artículos de fondo, aunque el menú esté abierto. El usuario se siente perdido y ya no sabe dónde se encuentra en el sitio.
Al usar inert, creas una especie de “barrera de seguridad”. Guías al usuario para que permanezca concentrado en la
acción importante del momento (rellenar un formulario, elegir una opción del menú) sin riesgo de salir de esa zona por
error.
Simplificar el uso del teclado
Muchas personas usan el teclado en lugar del ratón, ya sea por hábito o por necesidad (discapacidad motora). Sin el
atributo inert, estos usuarios a veces tienen que pulsar la tecla “Tab” 50 veces para atravesar una página entera
antes de llegar al botón “Cerrar” de una ventana. Con inert, eliminas todos los obstáculos innecesarios. La navegación
se vuelve fluida y natural.
¿Cómo usar ‘inert’ en tu código?
Una de las mayores ventajas de esta solución es su sencillez técnica. No necesitas ser un experto en programación para utilizarla.
Ejemplo práctico: la ventana modal
Es el caso más común. Aquí tienes cómo estructurar tu página para que funcione perfectamente:
<body>
<!-- Envolvemos todo el contenido principal en un div -->
<div id=contenido-principal>
<header>...</header>
<main>...</main>
<footer>...</footer>
</div>
<!-- La ventana que aparece encima -->
<div id=mi-ventana-modal role=dialog aria-modal=true>
<button onclick="cerrar()">Cerrar</button>
<p>Esta es una información importante.</p>
</div>
</body>
Cuando muestras la ventana, solo tienes que añadir el atributo en la zona que quieres desactivar:
document.getElementById('contenido').setAttribute('inert', '');
Y cuando cierras la ventana, quitas el atributo:
document.getElementById('contenido').removeAttribute('inert');
Con una sola línea de código, has solucionado todos los problemas de interactividad de tu página.
Inert frente a aria-hidden: no los confundas más
Es una confusión muy frecuente durante el desarrollo. Muchos sitios utilizan aria-hidden="true". Es una buena
intención, pero es incompleta.
aria-hidden="true": Le dice al lector de pantalla que no lea la zona. Pero el usuario aún puede clicar en ella- o acceder mediante la tecla Tab de su teclado. Es muy desconcertante porque puedes interactuar con algo que no se te
- anuncia.
inert: Bloquea todo al mismo tiempo. El ratón, el teclado y la voz. Es la solución completa.
Rendimiento y ecodiseño: programar menos para hacer más
En este blog, hablo a menudo de rendimiento y de respeto al entorno digital (ecodiseño). El atributo inert es un
excelente ejemplo de esta filosofía.
Reducir el peso de las páginas
Antes, para gestionar el bloqueo de la navegación, descargábamos librerías de JavaScript (como focus-trap) que pesaban
varias decenas de kilobytes. Multiplicado por millones de visitantes, esto representa un consumo de energía importante
para los servidores y las redes.
Al usar una función nativa del navegador, eliminas estos archivos innecesarios. Tu sitio carga más rápido, lo que mejora tu puntuación LCP (Largest Contentful Paint). Para Google, es una señal positiva que puede ayudar a tu SEO.
Menos trabajo para el ordenador del usuario
Cada script que se ejecuta en un navegador consume batería en un smartphone. inert es gestionado directamente por el
motor del navegador (en lenguaje C++ muy rápido). Es mucho más eficiente energéticamente que un script de JavaScript que
vigila cada movimiento de ratón o cada tecla pulsada.
Sobre la compatibilidad (Baseline 2024)
Durante unos años, inert fue una novedad experimental. Ya no es así. Desde 2024, forma parte de lo que se llama la
“Baseline”. Esto significa que todos los navegadores modernos (Chrome, Firefox, Safari, Edge) lo soportan perfectamente.
Si aún tienes que dar soporte a navegadores muy antiguos (lo cual es cada vez más raro), existen “polyfills” (pequeños scripts de emergencia), pero para el 96% de los internautas, esto funcionará de forma nativa sin ningún esfuerzo adicional por tu parte.
Truco de diseño: dar estilo a las zonas inactivas
Para mejorar la experiencia de usuario (UX), se recomienda mostrar visualmente que el contenido en segundo plano ya
no está disponible. Puedes usar el atributo inert como selector en tu archivo CSS:
/* Reducimos la visibilidad de todo lo que sea inerte */
[inert] {
opacity : .4;
filter : blur(2px);
user-select : none;
pointer-events : none;
}
Así, el usuario entiende de inmediato, con la mirada, que debe concentrarse en la ventana activa. Es una manera elegante de unir el diseño y la técnica.
Conclusión: hacia una artesanía del código responsable
Adoptar el atributo inert no es solo un ahorro de tiempo para el desarrollador. Es una prueba de respeto hacia los
usuarios. Al elegir soluciones nativas y ligeras, construimos una web que no deja a nadie fuera, ya sean personas
con discapacidad o usuarios con conexiones a internet lentas.
En 2026, la calidad de un sitio ya no se mide por la complejidad de sus scripts, sino por el acierto de sus decisiones
técnicas. Usa inert, simplifica tu código y haz de la accesibilidad una fortaleza para tu proyecto.
Preguntas frecuentes
¿El atributo inert también bloquea los formularios?
Sí. Si aplicasinert sobre un formulario, el usuario ya no podrá rellenar los campos ni clicar en el botón
de envío. Es muy útil para evitar un doble envío de formulario durante una carga.
¿Se puede poner el elemento 'body' en inert?
Técnicamente sí, pero se desaconseja porque bloquearía absolutamente todo el sitio, incluida la ventana que intentas mostrar. Es mejor apuntar a un contenedor que incluya todo menos tu ventana modal.¿Google ve el contenido inerte?
Sí. Los robots de indexación siguen leyendo el código HTML.inert no impide el posicionamiento del
contenido, solo impide la interacción humana.
