Zwei-Ebenen Breadcrumb Beispiel
Dies zeigt einen einfachen Breadcrumb-Pfad: Startseite > Features (aktuelle Seite)
Drei-Ebenen Breadcrumb Beispiel
Dies zeigt einen tieferen Breadcrumb-Pfad: Startseite > Citizen Intelligence Agency > Features (aktuelle Seite)
Vier-Ebenen Breadcrumb Beispiel
Dies zeigt einen noch tieferen Breadcrumb-Pfad mit vier Ebenen der Navigationshierarchie.
Barrierefreiheit Features
- Semantisches HTML: Verwendet
<nav> mit aria-label="Breadcrumb" und <ol> Listenstruktur - ARIA-Attribute: Aktuelle Seite markiert mit
aria-current="page" - Tastaturnavigation: Alle Links sind über Tab erreichbar mit sichtbaren Fokusindikatoren
- Screenreader-freundlich: Korrekte semantische Struktur kündigt Navigationskontext an
- Farbkontrast: Erfüllt WCAG 2.1 AA Standards (4,5:1 Minimum)
- Responsives Design: Passt sich an Mobile-, Tablet- und Desktop-Ansichten an
- Theme-Unterstützung: Funktioniert mit Light Mode, Dark Mode und Black Trigram Theme
Nutzungsanleitung
<nav aria-label="Breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="/">Startseite</a>
</li>
<li class="breadcrumb-item">
<a href="/section.html">Sektion</a>
</li>
<li class="breadcrumb-item" aria-current="page">
Aktuelle Seite
</li>
</ol>
</nav>
Test-Checkliste
- ✅ Tastaturnavigation (Tab, Shift+Tab, Enter)
- ✅ Screenreader-Ansagen (Test mit NVDA, JAWS oder VoiceOver)
- ✅ Farbkontrast erfüllt WCAG 2.1 AA (4,5:1 für normalen Text)
- ✅ Responsives Design funktioniert auf allen Viewport-Größen
- ✅ Fokusindikatoren sind deutlich sichtbar
- ✅ Hover-Zustände bieten visuelles Feedback
- ✅ Funktioniert im Light Mode und Dark Mode
- ✅ Funktioniert mit Black Trigram Theme