Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

Beispiele aus dem Buch (Abschnitt 2.7: Strukturen und Validierung)

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.

Unsortierte Liste zur Navigation

Auf dieser Seite wird eine Liste zur Navigation gezeigt. In der Hauptkategorie 1 ist eine Liste mit Unterpunkten eingeschachtelt. Im Quelltext ist ein unsichtbarer Hinweis für Nutzer von Screenreadern eingebunden, der diesen bei der Orientierung innerhalb der Navigation hilft.

HTML

<div class="nav">
  <span class="unsichtbar">Hauptnavigation</span>
  <ul>
    <li class="hauptkategorie"><a href="#">Hauptkategorie 1</a>
    <ul>
      <li class="unterseiten"><a href="#">Unterseite 1 </a></li>
      <li class="unterseiten"><a href="#">Unterseite 2 </a></li>
      <li class="unterseiten"><a href="#">Unterseite 3 </a></li>
      <li class="unterseiten"><a href="#">Unterseite 4 </a></li>
    </ul>
    <span class="unsichtbar">Ende Unterseiten Hauptkategorie 1</span>
    </li>
    <li class="hauptkategorie"><a href="#">Hauptkategorie 2 </a></li>
    <li class="hauptkategorie"><a href="#">Hauptkategorie 3</a> </li>
  </ul>
</div>

CSS

.nav {
  width: 14em;
  float:left;
}
.nav ul {
  list-style-type:none;
  margin:0em;
  padding:0;
}
.nav a {
  border:solid 0.1em;
  display:block;
  width: 100%;
  padding:0.2em;
  text-decoration:none;
}
.nav a:active,
.nav a:hover {
  text-decoration:underline;
}
.hauptkategorie {
  margin-bottom:0.05em;
  padding:0.05em;
  font-weight: bold;
}
.unterseiten {
   padding-left:1em;
   margin-top:0.1em;
  font-weight: normal;
}
.unsichtbar {
  position:absolute;
  left:-1000px;
  top:-1000px;
  width:0px;
  height:0px;
  overflow:hidden;
  display:inline;
}

Hinweis: Die Eigenschaft display wird zwischenzeitlich nicht mehr empfohlen, um Inhalte zu verstecken. Weitere Informationen finden Sie im Beitrag Unsichtbare Texte.

Browseransicht