Exemple de Fil d'Ariane à Deux Niveaux
This shows a simple breadcrumb trail: Home > Fonctionnalités (current page)
Exemple de Fil d'Ariane à Trois Niveaux
This shows a deeper breadcrumb trail: Home > Citizen Intelligence Agency > Fonctionnalités (current page)
Exemple de Fil d'Ariane à Quatre Niveaux
Ceci montre un fil d'Ariane encore plus profond avec quatre niveaux de hiérarchie de navigation.
Accessibility Fonctionnalités
- Semantic HTML: Uses
<nav> with aria-label="Fil d'Ariane" and <ol> list structure - Attributs ARIA : Page actuelle marquée avec
aria-current="page" - Navigation au Clavier : Tous les liens sont accessibles par tabulation avec indicateurs de focus visibles
- Compatible Lecteur d'Écran : Structure sémantique appropriée annonce le contexte de navigation
- Contraste de Couleur : Conforme aux normes WCAG 2.1 AA (4.5:1 minimum)
- Design Responsive : S'adapte aux viewports mobile, tablette et bureau
- Support de Thèmes : Fonctionne avec les modes clair, sombre et le thème Black Trigram
Instructions d'Utilisation
<nav aria-label="Fil d'Ariane">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="/">Home</a>
</li>
<li class="breadcrumb-item">
<a href="/section.html">Section</a>
</li>
<li class="breadcrumb-item" aria-current="page">
Current Page
</li>
</ol>
</nav>
Liste de Vérification des Tests
- ✅ Navigation au clavier (Tab, Shift+Tab, Entrée)
- ✅ Annonces du lecteur d'écran (tester avec NVDA, JAWS ou VoiceOver)
- ✅ Le contraste des couleurs respecte WCAG 2.1 AA (4.5:1 pour le texte normal)
- ✅ Le design responsive fonctionne sur toutes les tailles de viewport
- ✅ Les indicateurs de focus sont clairement visibles
- ✅ Les états de survol fournissent un retour visuel
- ✅ Fonctionne en mode clair et mode sombre
- ✅ Fonctionne avec le thème Black Trigram