Accesibilidad
Giuliomax Menu Builder está diseñado para dar soporte a WCAG 2.2 Nivel AA. La navegación funciona completamente sin ratón, los desplegables se anuncian a los lectores de pantalla y el movimiento puede desactivarse a nivel del sistema.
Sobre la conformidad. Estas funciones están diseñadas para dar soporte a WCAG 2.2 Nivel AA, pero la conformidad final de tu sitio en producción también depende de tu contenido, de tu tema y de los colores personalizados que configures. Comprueba tu sitio con las herramientas que se indican más abajo.
Soporte de WCAG 2.2 AA
El plugin está diseñado en torno a los siguientes criterios de éxito de WCAG 2.2 relevantes para componentes de navegación:
| Criterio | Nivel | Cómo se cumple |
|---|---|---|
| 1.4.3 Contraste (mínimo) | AA | Los temas integrados están diseñados para alcanzar una relación de contraste de 4,5:1; las personalizaciones de color propias deben volver a comprobarse. |
| 2.1.1 Teclado | A | Toda la funcionalidad es operable únicamente con teclado. |
| 2.1.2 Sin trampa de teclado | A | El foco siempre puede salir del menú sin usar un dispositivo señalador. |
| 2.4.3 Orden del foco | A | El orden del foco sigue el orden de lectura visual del menú. |
| 2.4.7 Foco visible | AA | Se muestra un indicador de foco visible en cada elemento interactivo. |
| 2.4.11 Apariencia del foco | AA | Los indicadores de foco cumplen los requisitos mínimos de tamaño y contraste (nuevo en WCAG 2.2). |
| 4.1.2 Nombre, rol, valor | A | Todos los elementos interactivos tienen un nombre accesible y el rol ARIA correcto. |
Navegación por teclado
| Tecla | Acción |
|---|---|
| Tab | Mover el foco al siguiente elemento del menú o elemento interactivo. |
| Shift + Tab | Mover el foco al elemento anterior. |
| Enter / Espacio | Activar un enlace, o abrir / cerrar un desplegable. |
| ↓ / ↑ | Mover el foco por los elementos dentro de un desplegable o panel de megamenú abierto. |
| → / ← | Moverse entre elementos de nivel superior. |
| Escape | Cerrar el desplegable o panel de megamenú actual y devolver el foco al elemento padre. |
| Inicio / Fin | Saltar al primer / último elemento en una lista desplegable. |
Atributos ARIA
El plugin añade automáticamente los siguientes atributos ARIA al marcado renderizado:
role="navigation"yaria-labelen el elemento<nav>(la etiqueta corresponde al nombre del menú en WordPress).aria-haspopup="true"yaria-expandeden los elementos de nivel superior que tienen un desplegable o megamenú.aria-controlsvinculando el botón disparador con su panel.role="menu"yrole="menuitem"dentro de los desplegables.aria-current="page"en el elemento correspondiente a la página actual.
No necesitas configurar nada de esto — se aplica automáticamente en función de la estructura del menú.
Gestión del foco
- Cuando se abre un desplegable, el foco se mueve al primer elemento dentro de él.
- Cuando se cierra un desplegable (con Escape o al mover el foco fuera), el foco vuelve al elemento que lo activó.
- El overlay del menú móvil atrapa el foco dentro mientras está abierto (el foco no puede tabular fuera del panel). Al cerrar el overlay, el foco regresa al botón hamburguesa.
Movimiento reducido
Todas las transiciones y animaciones respetan la media query CSS prefers-reduced-motion: reduce. Cuando el usuario ha activado "Reducir movimiento" en la configuración de accesibilidad de su sistema operativo:
- Las animaciones de deslizamiento/fundido de los desplegables se reemplazan por aparición/desaparición instantánea.
- Las transiciones de apertura/cierre del menú móvil son instantáneas.
- La animación de entrada de la barra de anuncios se desactiva.
- Las animaciones de entrada en los elementos del menú se desactivan.
Verificar tu menú
Tras configurar el menú, usa las siguientes herramientas para verificar la accesibilidad:
- Solo teclado — desconecta el ratón y navega por todo el menú usando únicamente Tab, teclas de flecha, Enter y Escape.
- axe DevTools — una extensión de navegador gratuita que ejecuta comprobaciones automáticas de WCAG en la página en vivo.
- NVDA / VoiceOver — lectores de pantalla para verificar que los estados de los desplegables y las etiquetas se anuncian correctamente.
- Colour Contrast Analyser — comprueba que tus personalizaciones de color siguen cumpliendo el ratio mínimo de 4,5:1.