Los menú desplegable en un sitio web es un conjunto de enlaces organizados previamente y que se disponene dentro de un llamado menú de navegación. El más común es el que se encuentra en un Menú principal de un sitio web.
La navegación en ordenadores normalmente se organiza en una barra horizontal, y a menudo se usa una flecha hacia abajo en el menú para indicar que hay un menú desplegable.
El menú desplegable, o submenú, es invisible hasta que un usuario interactúa con la barra de navegación con el mouse o el teclado.
Tipos de Menú Desplegable
Menú vertical
Cuando aparece el menú, los enlaces se ‘despliegan’ verticalmente debajo del elemento principal.
Un menú desplegable vertical permanecerá visible hasta que el usuario aleje el mouse o visite un enlace. Los menús desplegables venrticales a menudo se usan cuando el espacio de la pantalla es limitado, de modo que los visitantes pueden acceder al contenido relevante sin tener que visitar otras páginas primero para encontrarlo.
Ideal para navegación pensada desde móviles.
Menú de Horizontal
Un menú desplegable horizontal es un submenú oculto que se revela al interactuar con la navegación. La diferencia es que, en lugar de que el submenú se despliegue verticalmente, «volará» horizontalmente. Al igual que un menú desplegable vertical, un menú horizontal puede tener múltiples niveles.
Aquí hay un ejemplo de un menú desplegable de dos niveles:
Se pueden combinar menús desplegables verticales y horizontales. En el siguiente ejemplo, el enlace Depth tiene un menú desplegable que muestra el Nivel 01.
El Nivel 01 tiene un menú desplegable para el Nivel 02 y, a su vez, el menú desplegable del Nivel 02 muestra el Nivel 03.
Ahora que sabes qué son un menú desplegable vertical y un menú horizontal, echemos un vistazo a la creación de menús desplegables accesibles.
Cómo hacer que un menú desplegable sea accesible desde la web
El primer paso para crear un menú desplegable accesible es planificar la estructura del sitio.
Es decir, calcula las páginas de nivel superior que se mostrarán en la navegación principal, luego determina cuáles de ellas necesitan páginas secundarias.
A continuación se muestra un ejemplo de la estructura básica para una navegación con menús desplegables.
En el ejemplo, la página de Servicios tiene cuatro páginas secundarias: redacción de blogs, redes sociales, SEO y diseño web. La página del blog tiene tres páginas secundarias: marketing, redes sociales y análisis. Por lo tanto, habrá dos submenús desplegables para Servicios y Blog.
Las páginas secundarias también pueden tener sus propias páginas secundarias. Por ejemplo, puede tener dos páginas secundarias para la categoría Marketing en tu blog, como Marketing de contenido y Marketing por correo electrónico. Este tipo de navegación se denomina submenú de dos niveles.
En Oso Red tendrás configuraciones de navegación que permiten establecer páginas secundarias.
Demasiados niveles de un menú desplegable o un menú de salida pueden hacer que la navegación sea demasiado difícil de usar para algunas personas.
Por ejemplo, alguien con debilidad en las manos puede no tener suficiente control motor para mover un mouse en las áreas correctas para abrir todos los submenús. Por lo tanto, haz los submenús lo más simple posible.
Para que tus menús desplegables sean accesibles, probablemente necesitarás la ayuda de un desarrollador.
Los menús desplegables accesibles deben codificarse correctamente para satisfacer las necesidades de los diferentes grupos de usuarios.
Tipos de Usuarios que debes considerar antes de crear un Menú desplegable
Los usuarios ciegos que usan un lector de pantalla necesitan el menú codificado como una lista de enlaces para poder saber cuántos enlaces hay en la navegación principal o en cada menú desplegable. También necesitan saber en qué enlace está la página actual en la que se encuentran.
Los usuarios videntes que dependen de un teclado deben poder navegar por menús desplegables accesibles mediante la tecla de tabulación y la tecla Intro. Si no pueden ver los menús desplegables cuando navegan por la página, no sabrán qué enlaces hay y hacia dónde conducen.
Los visitantes que pueden usar un mouse pero no tienen un control motor fino requieren que los menús desplegables estén visibles durante el tiempo suficiente para poder usarlos. Si aparece un menú desplegable en el mouse, pero la persona no tiene una mano firme, puede desaparecer rápidamente y no ser accesible.