Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

Beispiele aus dem Buch (Abschnitt 2.3: Verständlichkeit, Navigation und Orientierung)

Cover: 'Barrierefreies Webdesign — Praxishandbuch für Webgestaltung und grafische Programmoberflächen' von Jan Eric Hellbusch Extern: "Barrierefreies Webdesign — Praxishandbuch für Webgestaltung und grafische Programmoberflächen" bei amazon.de

Dies 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

Screenshot dieses Beispieles