Le problème
Un sous-menu dépendant seulement de :hover échappe au clavier. role="menu" sans interactions adaptées expose aussi un fonctionnement incomplet : le nom usuel du composant ne définit pas son rôle ARIA.
Exemple : mauvais et correct
Mauvais
<nav>
<span>Prestations</span>
<div class="sous-menu"><a href="/audit-rgaa">Audit RGAA</a></div>
</nav>
<style>
.sous-menu { display: none; }
nav:hover .sous-menu { display: block; }
</style>Correct
<nav aria-label="Navigation principale">
<ul>
<li>
<details>
<summary>Prestations</summary>
<ul>
<li><a href="/audit-rgaa">Audit RGAA</a></li>
<li><a href="/mise-en-conformite-rgaa">Mise en conformité</a></li>
</ul>
</details>
</li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>details et summary fournissent une divulgation native pour ce petit sous-menu à ouverture volontaire, sans modèle de menu applicatif.
RGAA concerné
Les critères dépendent de l’élément, de son usage et des cas particuliers applicables. Voici les contrôles à examiner pour ce sujet.
- Critère 9.2 — Baliser la navigation avec nav.
- Critère 9.3 — Structurer la liste de destinations.
- Critère 7.3 — Utiliser les sous-menus scriptés au clavier.
- Critère 12.11 — Atteindre les contenus additionnels concernés.
- Critère 6.1 — Expliciter les destinations.
Impact utilisateur
Une fermeture pendant le déplacement peut rendre une rubrique inaccessible au clavier. Le lecteur d’écran doit aussi restituer l’état ouvert ou fermé de la commande.
Correction
- Utilisez des liens avec href pour les destinations et une commande pour ouvrir le sous-menu. Pour une divulgation personnalisée, synchronisez aria-expanded sur button avec l’affichage.
- Gardez ordre logique et états visibles. Si l’ouverture se fait aussi au survol ou au focus, vérifiez maintien et fermeture des contenus additionnels concernés.
- Réservez menu et menubar aux widgets implémentant leurs interactions, notamment flèches et gestion du focus. Une navigation ordinaire n’exige pas ces rôles.
Méthode de test
- Ouvrez, parcourez et refermez chaque sous-menu au clavier : aucune destination ne doit dépendre du survol.
- Au lecteur d’écran, vérifiez nom, état et destinations affichées.
- À fort zoom et sur petit écran, les sous-menus doivent rester lisibles sans bloquer l’accès à la suite.
Points de vigilance
- Un lien vide comme déclencheur n’offre aucune destination utile.
- Les exigences au survol ou au focus, notamment 10.13, dépendent du comportement proposé.
Sources officielles
Le RGAA fournit les critères de contrôle. Les ressources du W3C et du WHATWG complètent les méthodes de mise en œuvre ; elles ne remplacent pas les tests RGAA.