SkillCodexOuvrir les favoris et l’historique
Mesure d'audience
Avec ton accord, Google Analytics mesure l'usage du site pour nous aider à l'améliorer. Ton choix est mémorisé sur cet appareil et reste modifiable via « Cookies » en pied de page.
Comparaison comportementale
Choisir Volet latéral pour : Modifier des filtres sans quitter les résultats. Choisir Barre latérale pour : Naviguer entre les sections stables d'un espace de travail.
Décision
La surface doit-elle rester persistante, entrer depuis un bord latéral ou monter depuis le bas ?
Choisis Barre latérale pour une région persistante de la mise en page ; choisis Drawer pour un panneau temporaire qui entre depuis un bord.
| Dimension | Volet latéralDrawer | Barre latéraleSidebar |
|---|---|---|
| Déclenchement | Un bouton explicite ouvre un panneau temporaire de tâche ou de navigation. | Généralement présente avec la mise en page ; un bouton de navigation peut la révéler sur petit écran. |
| Modalité | Peut être modale ou non modale ; le spécimen est modal lorsque la page arrière est inerte. | Région persistante non modale de la mise en page ; le contenu principal reste actif. |
| Positionnement | Glisse depuis un bord latéral et reste attachée à ce bord. | Une colonne latérale dans le flux du document, pas une superposition au-dessus de la page. |
| Interactivité | Contient des contrôles de navigation ou de tâche, avec focus contenu uniquement dans sa forme modale. | Accueille navigation, filtres ou contrôles complémentaires persistants. |
| Focus | L'ouverture place le focus sur le titre ou le premier champ utile, le contient, puis le rend au déclencheur. | Le focus circule normalement entre la barre et le contenu principal ; le repli conserve un contrôle logique focalisé. |
| Fermeture | Le contrôle fermer nommé et Échap fonctionnent toujours ; la fermeture par le voile est désactivée si elle peut perdre des changements. | Une barre persistante se replie, elle ne se ferme pas ; son équivalent mobile temporaire suit son propre contrat Drawer. |
| Rôle accessible | dialog[aria-modal=true] | aside > nav[aria-label] |
| Cas d’usage | Modifier des filtres sans quitter les résultats | Naviguer entre les sections stables d'un espace de travail |
| Comportement mobile | Utiliser un panneau large ou pleine largeur ; passer à une feuille basse si l’accès par le bord inférieur est plus naturel. | La replier derrière une navigation explicite ou l’adapter en surface temporaire ; ne pas la comprimer en colonne illisible. |
