Si en el ordenador aparecen Inicio, Servicios y Contacto, pero el móvil muestra una lista interminable de páginas, conviene revisar qué menú utiliza cada cabecera antes de tocar el CSS. Una diferencia de estructura necesita un diagnóstico distinto a un problema de tamaño o de color.
Esta guía propone un orden de revisión para una web corporativa. El objetivo es conservar las mismas rutas y adaptar la interacción a una pantalla pequeña.
1. Compara destinos, orden y nombres
La guía de estructura de menús de W3C recomienda mantener la coherencia entre tamaños de pantalla: los elementos que se muestran deben conservar su orden, denominación y destino, aunque algunos se agrupen en submenús.
Prepara una lista con cada enlace de la cabecera y su URL. Después abre el móvil y comprueba uno por uno. No compares únicamente la apariencia: dos enlaces llamados “Servicios” podrían llevar a páginas distintas.
Como propuesta para una web pequeña, puedes partir de Inicio, Servicios, Sobre mí, Blog y Contacto. Dentro de Servicios, agrupa las especialidades que realmente ofreces. No es una estructura universal: debe responder a las tareas de tus visitantes.
2. Revisa qué menú tiene asignado el tema
Algunos temas separan la navegación de escritorio de la del panel móvil. En Blocksy, el elemento Mobile Menu permite seleccionar explícitamente el conjunto de enlaces que debe mostrar, según su documentación oficial.
Si utilizas este tema, abre el personalizador, localiza el elemento de menú móvil en la cabecera y revisa su selector de menú. Si quieres mantener una navegación común, selecciona el mismo menú que en escritorio. Antes de guardar, anota la selección anterior para poder revertirla.
Si hay un constructor de cabeceras o un plugin de menús, identifica cuál genera el panel que se ve realmente. Cambiar un menú que no está conectado a ese panel no resolverá la diferencia.
3. Separa navegar de desplegar
Un enlace lleva a una página; un botón abre o cierra contenido. Cuando “Servicios” también es una página, resulta útil conservar su enlace y disponer de un control independiente para desplegar las especialidades.
El ejemplo de navegación desplegable de W3C utiliza botones y listas de enlaces. Una navegación web habitual no necesita asumir automáticamente el rol ARIA de menú de aplicación. El estado expandido debe reflejar el estado real del desplegable.
Recomendación de implementación: prioriza los controles del tema si ya funcionan con teclado. Añadir un segundo sistema de apertura puede generar dos estados contradictorios y complicar el mantenimiento.
4. Comprueba la legibilidad dentro del panel
Las pautas de estilo de W3C aconsejan dejar espacio suficiente alrededor de las opciones y evitar solapamientos cuando se amplía el texto. Revisa también que la selección y el foco se distingan sin depender exclusivamente del color.
Prueba un nombre de servicio largo, el último enlace del panel y el botón de cierre. Si el menú supera la altura disponible, comprueba que puedes desplazarte hasta el final sin perder el control para cerrarlo.
5. Una prueba de aceptación concreta
- Abre el menú en móvil y comprueba que no hay enlaces ausentes o inesperados.
- Despliega Servicios y visita una especialidad.
- Vuelve atrás y comprueba que puedes abrir y cerrar de nuevo el panel.
- Recorre los controles con teclado y revisa el foco visible.
- Aumenta el tamaño del texto y comprueba que no se recortan opciones.
- Repite en una página interior y en una entrada del blog.
Superar estas pruebas no sustituye una auditoría completa de accesibilidad, pero permite detectar fallos concretos antes de dar el menú por terminado.
Si la navegación de tu web necesita una revisión, puedes consultar el servicio de desarrollo web WordPress o contarme qué ocurre en móvil. Si estás valorando cambios más amplios, esta guía explica cuándo optimizar la web actual y cuándo replantearla.
