Accessible breadcrumbs bauen und direkt prüfen

01 / Pfadwerkbank

Pfad bauen und sofort prüfen.

Die Demo startet von selbst und zeigt die wichtigsten Zustände. Sobald Sie eingreifen, gehört die Werkbank Ihnen.

Pfadwerkbank

4/4bestanden

Live-Vorschau

Screenreader: Navigation „Breadcrumb“

Strukturprüfung

Navigation
Landmark heißt „Breadcrumb“.
Pfad
4 eindeutige Ebenen in geordneter Liste.
Eltern-URLs
3 sichere interne oder HTTPS-Ziele.
Aktuelle Seite
Letzte Ebene trägt aria-current="page".

HTML

Trenner per CSS ergänzen

<nav aria-label="Breadcrumb">
  <ol class="breadcrumbs">
    <li><a href="/">Startseite</a></li>
    <li><a href="/produkte">Produkte</a></li>
    <li><a href="/produkte/tastaturen">Tastaturen</a></li>
    <li aria-current="page"><span>Mechanische Tastatur</span></li>
  </ol>
</nav>

02 / Der Unterschied

Ein Pfad ist der Anfang, nicht die Website.

Orientierung scheitert an Details
Ein fehlender Navigationsname, doppelte Ebenen oder eine nicht markierte aktuelle Seite lassen Screenreader-Nutzerinnen und -Nutzer den Standort raten.
Der ganze Auftritt zählt
Der Website-Check findet unbeschriftete Links, fehlende Alternativtexte und weitere automatisch erkennbare Barrieren auf Ihren Seiten.
Fundstellen mit nächstem Schritt
Jeder Befund nennt Seite, Vorkommen und den konkreten nächsten Schritt – kostenlos und ohne Installation.

03 / Auf Ihrer Website

Jetzt die eigene Seite prüfen.

Die Werkbank prüft einen Pfad. Der Website-Check prüft Ihre veröffentlichten Seiten auf automatisch erkennbare Barrieren.

1URL
2Auswahl
3Prüfung
4Ergebnis

Live-Vorschau

Strukturprüfung

HTML

Orientierung scheitert an Details

Der ganze Auftritt zählt

Fundstellen mit nächstem Schritt