Exempel på tvånivå breadcrumb
Detta visar en enkel breadcrumb-spårning: Hem > Funktioner (aktuell sida)
Exempel på trenivå breadcrumb
Detta visar en djupare breadcrumb-spårning: Hem > Citizen Intelligence Agency > Funktioner (aktuell sida)
Exempel på fyranivå breadcrumb
Detta visar en ännu djupare breadcrumb-spårning med fyra nivåer av navigationshierarki.
Tillgänglighetsfunktioner
- Semantisk HTML: Använder
<nav> med aria-label="Breadcrumb" och <ol> liststruktur - ARIA-attribut: Aktuell sida markerad med
aria-current="page" - Tangentbordsnavigering: Alla länkar är tabb-åtkomliga med synliga fokusindikatorer
- Skärmläsarvänlig: Korrekt semantisk struktur annonserar navigationskontext
- Färgkontrast: Uppfyller WCAG 2.1 AA-standarder (minst 4,5:1)
- Responsiv design: Anpassar sig till mobil-, surfplatte- och skrivbordsvisningar
- Temastöd: Fungerar med ljust läge, mörkt läge och Black Trigram-tema
Användningsinstruktioner
<nav aria-label="Breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="/">Hem</a>
</li>
<li class="breadcrumb-item">
<a href="/section.html">Sektion</a>
</li>
<li class="breadcrumb-item" aria-current="page">
Aktuell sida
</li>
</ol>
</nav>
Testchecklista
- ✅ Tangentbordsnavigering (Tab, Shift+Tab, Enter)
- ✅ Skärmläsarannonsering (testa med NVDA, JAWS eller VoiceOver)
- ✅ Färgkontrast uppfyller WCAG 2.1 AA (4,5:1 för normal text)
- ✅ Responsiv design fungerar på alla visningsstorlekar
- ✅ Fokusindikatorer är tydligt synliga
- ✅ Hovringstillstånd ger visuell feedback
- ✅ Fungerar i ljust läge och mörkt läge
- ✅ Fungerar med Black Trigram-tema