Beispiele aus dem Buch (Abschnitt 2.3: Verständlichkeit, Navigation und Orientierung)
"Barrierefreies Webdesign — Praxishandbuch für Webgestaltung und grafische Programmoberflächen" bei amazon.deDies ist ein Beispiel aus dem Buch 
Barrierefreies Webdesign (2004), das Ende 2004 im dpunkt.Verlag erschienen ist.
Navigation mit Bread-Crumb-Trail
Mit einer Pfadangabe kann dem Benutzer eine Orientierungshilfe gegeben werden. Der Benutzer kann daran erkennen, wo er sich innerhalb der Struktur eines Webauftrittes befindet.
Hinweis (2016): Aktuelle Informationen zur Navigation über Breadcrumbs finden Sie im Beitrag Eine ergänzende Orientierungshilfe: Die Brotkrumen-Navigation.
HTML
<ul class="navi">
<li><a href="#">Startseite</a> | </li>
<li><a href="#">Produkte</a> | </li>
<li><a href="#">Service</a> | </li>
<li><a href="#">Informationen</a> | </li>
<li><a href="#">Über uns</a> | </li>
<li><a href="#">Hilfe</a></li>
</ul>
CSS
ul.navi {
margin:0;
list-style-type:none;
background:#d6d6d6;
padding:5px;
}
ul.navi li {
display:inline;
background: #d6d6d6;
}
ul.navi li a {
padding:3px 3px 3px 3px;
background: #d6d6d6;
text-decoration:none;
color: #000000;
font:bold 90% Verdana,Arial,sans-serif;
border-bottom:2px solid #d6d6d6;
}
ul.navi li a:hover, ul.navi li a:focus {
border-bottom:2px solid #0066B2;
background: #f1f8ff;
}
ul.brotkruemmelpfad {
margin:5px 0 0 0;
list-style-type:none;
background: #f2f2f2;
padding:2px 2px 2px 8px;
}
ul.brotkruemmelpfad li {
display:inline;
background: #f2f2f2;
font:normal 80% Verdana,Arial,sans-serif;
}
ul.brotkruemmelpfad li a {
padding: 1px 2px 0px 2px;
background: #f2f2f2;
color: #000000;
}
ul.brotkruemmelpfad li a:hover, ul.brotkruemmelpfad li a:focus {
background:#ffffff;
text-decoration:none;
border-bottom: 2px solid #0066B2;
}
Browseransicht
Screenshot
