TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
El atributo aria-hidden="true" oculta visual y semánticamente un elemento a los lectores de pantalla, pero no evita que reciba el foco del teclado. Si ocultas un modal, debes usar display: none o asegurar que todos sus enlaces y botones internos tengan tabindex="-1".
La desconexión entre la semántica y el teclado
Ocurre frecuentemente al animar menús laterales o ventanas modales. Si el menú se esconde de la pantalla empujándolo fuera del área visible usando CSS (`transform: translateX`) y se marca con aria-hidden="true", la persona usuaria ciego creerá que el menú no existe. Sin embargo, al navegar con la tecla TAB, su cursor entrará al menú oculto.
El patrón erróneo: Código Accesible Deficiente
El lector de pantalla se queda en silencio absoluto mientras la persona usuaria tabula por botones invisibles, perdiendo su ubicación.
<!-- MAL: Oculto semánticamente pero activo para el teclado -->
<div class="offcanvas-menu" aria-hidden="true">
<button>Cerrar</button>
<a href="/perfil">Mi Perfil</a>
</div>La Solución Accesible: Código Recomendado
La regla de oro: Lo que no se ve y no se oye, no debe poder ser enfocado. Utiliza el atributo inert de HTML5 o maneja los tabindex con Javascript.
<!-- BIEN: Uso del atributo moderno inert -->
<div class="offcanvas-menu" aria-hidden="true" inert>
<button>Cerrar</button>
<a href="/perfil">Mi Perfil</a>
</div>
<!-- ACEPTABLE: Uso tradicional con tabindex -->
<div class="offcanvas-menu" aria-hidden="true">
<button tabindex="-1">Cerrar</button>
<a href="/perfil" tabindex="-1">Mi Perfil</a>
</div>Metodología de Verificación y Testing
Pruebas Manuales con Lectores de Pantalla
Marcar un contenedor con aria-hidden="true" y verificar con Tab si los botones internos siguen recibiendo foco. Si el lector de pantalla se queda en silencio mientras el indicador de foco visible se mueve a un botón oculto, hay una trampa de foco. Con inert, el teclado debe saltar completamente el contenedor.
Inspección del Árbol de Accesibilidad
En Chrome DevTools, verificar que los botones dentro del contenedor marcado con aria-hidden="true" no aparezcan como focusables en el Accessibility Tree. Si aparecen, existe una desconexión entre la semántica y el foco.
Herramientas Automatizadas
Axe DevTools: la regla aria-hidden-focus detecta exactamente este patrón (elementos focusables dentro de contenedores aria-hidden). Es una de las reglas más confiables para este caso.
