Sidenav - Navigation latérale

Composant permettant d'offrir une navigation secondaire claire et accessible, et pouvant être replié afin de laisser plus de place au contenu

Rôle et attributs ARIA

Rôles et attributs ARIA générés par défaut

  • Rôle ARIA principal : <nav role=”navigation”>

 

Attribut

Impact

nav-label

⚠️ Obligatoire

Donne un nom accessible à la navigation latérale. Permet à l’utilisateur de différencier les éléments navigation de la page.

collapsed

Modifie la valeur de aria-expanded sur le bouton, et replie la navigation.

A l’état replié, seulement les menu-item ou menu-accordion possédant un préfixe sont affichés. Ils possèdent alors un tooltip avec pour contenu leur libellé.

 

 

Navigation et interaction clavier

Touches supportées :

  • Ctrl + b → Si l’attribut allow-shortcut est ajouté, permet de déplier / replier la navigation latérale

 

Bonnes pratiques et pièges à éviter