Imagina que un visitante abre la web de un estudio y pasa de la página de inicio a los servicios y después a los datos de contacto sin tocar el ratón. ¿Puede saber dónde está? ¿Puede abrir la sección que necesita? Este pequeño recorrido revela si la navegación funciona como herramienta útil, más allá de su aspecto en una maqueta. El principio central de las orientaciones de W3C WAI sobre el teclado es sencillo: las funciones de la interfaz deben estar disponibles mediante un teclado.
Empieza con una estructura clara
Para una navegación habitual, utiliza enlaces agrupados en listas dentro de un elemento nav, tal como describe el tutorial de WAI sobre la estructura de menús. Un enlace lleva a una página; un botón abre o cierra un submenú. Si «Servicios» tiene una página general y secciones anidadas, separa esas acciones. Así resulta fácil explicar el componente antes del desarrollo: la etiqueta abre la vista general y un botón adyacente muestra más opciones.
Planifica la secuencia de navegación
Tab debe seguir una ruta comprensible, con Mayús + Tab para retroceder. Las orientaciones de WAI sobre el orden del foco destacan la conservación del significado y la operabilidad. Marca esa ruta en el diseño: logotipo, enlaces principales, botón de consulta y después el siguiente control de la página. Si el foco salta inesperadamente entre zonas lejanas, inspecciona el orden de los elementos en el código, no solo su disposición visual. Acuerda la secuencia prevista antes de añadir animación.
Haz que el foco sea fácil de ver
El foco identifica el elemento que recibirá la siguiente acción del teclado. Las orientaciones sobre foco visible explican que el indicador debe permanecer visible mientras se muestre el foco. No elimines el contorno predeterminado sin un sustituto claro. El tutorial de WAI sobre el estilo de los menús trata el foco y la página actual como estados distintos. Diseña ambos conjuntamente: un subrayado podría identificar la sección actual y un contorno diferente marcar la posición del teclado.
Abre los submenús de forma deliberada
Pasar el cursor no debe ser la única forma de mostrar enlaces anidados. Las orientaciones de WAI sobre menús desplegables tratan el manejo con teclado y la comunicación del estado expandido mediante aria-expanded. La navegación habitual no necesita automáticamente el rol menu. En el ejemplo de navegación desplegable de WAI, Intro y Espacio activan los botones; Escape cierra un desplegable y devuelve el foco a su botón. Prueba este patrón de interacción en tu implementación en lugar de tratar el ejemplo como código listo para producción.
Recorre un trayecto real
- Abre la página de inicio y aparta el ratón. Usa Tab para encontrar el primer elemento de navegación.
- Llega a «Servicios», abre su submenú y elige una página. Repite el recorrido hacia atrás.
- Cierra y vuelve a abrir el submenú. Comprueba dónde aparece el foco después de cada acción.
- Repite en una ventana estrecha y con zoom de página. Deja visibles los avisos y paneles fijos existentes.
Comprueba por separado el contenido superpuesto: WAI advierte que no debe ocultarse por completo el componente enfocado con contenido de la página. Los usuarios también deben poder salir de un componente mediante el teclado. Un menú habitual no debería mantenerlos recorriendo su interior indefinidamente.
Registra comportamientos, no impresiones
Un informe de incidencias útil incluye la URL de la página, el navegador, la anchura de la ventana, las pulsaciones y el resultado esperado. En lugar de «el menú resulta incómodo», escribe: «Al cerrar el submenú se pierde el foco visible; el siguiente Tab empieza el recorrido de nuevo». Ese detalle facilita volver a probar. Este breve ejercicio puede descubrir problemas de navegación, pero no sustituye una evaluación completa de accesibilidad ni demuestra conformidad con las WCAG.