TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
Si un <div> tiene contenido que desborda y usa CSS overflow: auto o scroll, la persona usuaria de ratón puede mover la barra. Sin embargo, la persona usuaria de teclado no puede enfocar el contenedor para usar las flechas direccionales a menos que añadas tabindex="0", violando la WCAG 2.1.1 (Teclado).
La trampa de los términos y condiciones
Es un patrón ubicuo en los modales de "Aceptar Términos de Servicio". Se inyecta un texto legal de 20 páginas en una caja pequeña con scroll. La persona usuaria de teclado tabula, el foco salta la caja y cae directamente en el botón "Aceptar". La persona usuaria queda imposibilitado físicamente para leer el texto.
El patrón erróneo: Código Accesible Deficiente
El contenedor no es un elemento interactivo nativo, por lo que el navegador lo excluye del flujo de tabulación.
<!-- MAL: Zona de desplazamiento inalcanzable por teclado -->
<style>
.scroll-box { height: 200px; overflow-y: scroll; }
</style>
<div class="scroll-box">
<p>Contenido legal muy extenso...</p>
</div>La Solución Accesible: Código Recomendado
Forzar la inclusión del contenedor en el índice de tabulación. Una vez que recibe el foco, las teclas direccionales (Arriba/Abajo) o la barra espaciadora harán scroll nativamente.
<!-- BIEN: Contenedor enfocable y gobernable por teclado -->
<div class="scroll-box" tabindex="0" aria-label="Términos de servicio">
<p>Contenido legal muy extenso...</p>
</div>Metodología de Verificación y Testing
Pruebas Manuales con Lectores de Pantalla
Desactivar el ratón y navegar la página exclusivamente con Tab, Shift+Tab, Enter y las teclas de flecha. Verificar que todos los elementos interactivos sean alcanzables, que el indicador de foco sea visible, y que no existan trampas de foco donde el cursor quede atrapado.
Inspección del Árbol de Accesibilidad
En Chrome DevTools, seleccionar el elemento afectado en el panel Elements, luego abrir la pestaña Accessibility. Verificar que las propiedades Role, Name y State reflejen correctamente la intención del componente según el criterio WCAG 2.1.1.
Herramientas Automatizadas
Ejecutar Axe DevTools: las reglas de teclado verifican que no existan trampas de foco. Para confirmar la operabilidad completa por teclado, se recomienda una auditoría manual navegando toda la interfaz con Tab y las teclas de flecha.
