ACCESIBILIDAD ≠ OVERLAY · ENTREGA 25

Accesibilidad ≠ Overlay: cuando un menú desplegable se convierte en una barrera

📅 Octubre 2026   ·   ⏱ 7 min de lectura

Un menú puede verse perfecto y, sin embargo, resultar imposible de utilizar para algunas personas.

01. El problema no siempre se ve

Un menú desplegable puede funcionar con el ratón y fallar completamente con el teclado, un lector de pantalla o una pantalla táctil. La apariencia no garantiza una interacción accesible.

02. Menús que dependen del ratón

Si el submenú solo aparece al pasar el cursor, quienes navegan con Tab o utilizan otros dispositivos de entrada pueden quedarse sin acceso. La interacción debe poder realizarse sin depender del hover.

03. Foco visible y orden lógico

Cada enlace y control debe poder recibir el foco en un orden comprensible. El indicador de foco tiene que ser visible; eliminar el contorno sin ofrecer una alternativa deja a muchas personas sin orientación.

04. Comunicar si está abierto o cerrado

Cuando un botón expande un submenú, su nombre y estado deben ser comprensibles. Un botón nativo con aria-expanded actualizado puede ayudar a las tecnologías de apoyo a comunicar la interacción.

05. Submenús y navegación con teclado

Los menús deben poder abrirse y cerrarse con el teclado, permitir alcanzar sus opciones y evitar que el foco quede atrapado. En navegación habitual de sitios web no siempre es apropiado aplicar el patrón ARIA de menús de aplicación.

06. Por qué un overlay no lo arregla

Cambiar colores, tamaños o añadir una capa flotante no corrige por sí solo eventos dependientes del ratón, controles sin semántica ni una gestión del foco defectuosa. La solución debe aplicarse al componente.

07. Cómo comprobarlo

Desconecta el ratón. Recorre la navegación con Tab y Shift+Tab; abre y cierra cada submenú, observa el foco y repite la prueba con un lector de pantalla. Comprueba también el comportamiento en móvil.

08. Conclusión

Un menú accesible no solo se ve bien: funciona con diferentes formas de interacción, comunica su estado y permite llegar a todas las secciones. La accesibilidad se desarrolla desde el diseño y el código.

♿ Accessibility ≠ Overlay · 25

Adapta tu Web — El diseño inclusivo es mejor diseño.