Accessibilité
Giuliomax Menu Builder est conçu pour prendre en charge le niveau AA des WCAG 2.2. La navigation fonctionne entièrement sans souris, les menus déroulants sont annoncés aux lecteurs d’écran et les animations peuvent être désactivées à l’échelle du système.
À propos de la conformité. Ces fonctionnalités sont conçues pour prendre en charge le niveau AA des WCAG 2.2, mais la conformité finale de votre site en ligne dépend aussi de votre contenu, de votre thème et des couleurs personnalisées que vous définissez. Testez votre site avec les outils indiqués ci-dessous.
Prise en charge des WCAG 2.2 AA
L’extension est conçue autour des critères de réussite WCAG 2.2 suivants, pertinents pour les composants de navigation :
| Critère | Niveau | Comment il est respecté |
|---|---|---|
| 1.4.3 Contraste (minimum) | AA | Les thèmes intégrés sont conçus pour respecter un rapport de contraste de 4,5:1 ; les couleurs personnalisées doivent être revérifiées. |
| 2.1.1 Clavier | A | Toutes les fonctionnalités sont accessibles au seul clavier. |
| 2.1.2 Pas de piège au clavier | A | Le focus peut toujours quitter le menu sans recourir à un dispositif de pointage. |
| 2.4.3 Ordre de focus | A | L’ordre du focus suit l’ordre de lecture visuel du menu. |
| 2.4.7 Visibilité du focus | AA | Un indicateur de focus visible s’affiche sur chaque élément interactif. |
| 2.4.11 Apparence du focus | AA | Les indicateurs de focus respectent les exigences minimales de taille et de contraste (nouveauté des WCAG 2.2). |
| 4.1.2 Nom, rôle, valeur | A | Tous les éléments interactifs possèdent un nom accessible et un rôle ARIA correct. |
Navigation au clavier
| Touche | Action |
|---|---|
| Tab | Déplacer le focus vers l’élément de menu ou l’élément interactif suivant. |
| Maj + Tab | Déplacer le focus vers l’élément précédent. |
| Entrée / Espace | Activer un lien, ou ouvrir / fermer un menu déroulant. |
| ↓ / ↑ | Déplacer le focus parmi les éléments d’un menu déroulant ou d’un panneau de méga-menu ouvert. |
| → / ← | Naviguer entre les éléments de premier niveau. |
| Échap | Fermer le menu déroulant ou le panneau de méga-menu en cours et redonner le focus à l’élément parent. |
| Origine / Fin | Atteindre le premier / dernier élément d’une liste déroulante. |
Attributs ARIA
L’extension ajoute automatiquement les attributs ARIA suivants au balisage généré :
role="navigation"etaria-labelsur l’élément<nav>(le libellé correspond au nom du menu dans WordPress).aria-haspopup="true"etaria-expandedsur les éléments de premier niveau dotés d’un menu déroulant ou d’un méga-menu.aria-controlsreliant le bouton déclencheur à son panneau.role="menu"etrole="menuitem"à l’intérieur des menus déroulants.aria-current="page"sur l’élément correspondant à la page courante.
Vous n’avez rien à configurer : tout cela est appliqué automatiquement en fonction de la structure du menu.
Gestion du focus
- Lorsqu’un menu déroulant s’ouvre, le focus se déplace vers son premier élément.
- Lorsqu’un menu déroulant se ferme (via Échap ou en déplaçant le focus ailleurs), le focus revient sur l’élément déclencheur.
- La superposition du menu mobile retient le focus à l’intérieur tant qu’elle est ouverte (impossible de tabuler hors du panneau). Sa fermeture redonne le focus au bouton hamburger.
Animations réduites
Toutes les transitions et animations respectent la media query CSS prefers-reduced-motion: reduce. Lorsque l’utilisateur a activé « Réduire les animations » dans les réglages d’accessibilité de son système d’exploitation :
- Les animations de glissement / fondu des menus déroulants sont remplacées par un affichage / masquage instantané.
- Les transitions d’ouverture / fermeture du menu mobile sont instantanées.
- L’animation d’apparition de la barre d’annonce est désactivée.
- Les animations d’apparition des éléments de menu sont désactivées.
Tester votre menu
Après avoir configuré votre menu, utilisez les outils suivants pour vérifier son accessibilité :
- Clavier uniquement — débranchez votre souris et parcourez l’intégralité du menu à l’aide des seules touches Tab, des flèches, Entrée et Échap.
- axe DevTools — une extension de navigateur gratuite qui exécute des contrôles WCAG automatisés sur la page en ligne.
- NVDA / VoiceOver — des lecteurs d’écran permettant de vérifier que les états des menus déroulants et les libellés sont correctement annoncés.
- Color Contrast Analyzer — vérifiez que vos couleurs personnalisées respectent toujours le rapport minimal de 4,5:1.