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.

Ausdruckbare und mit Leerzeichen umgebene Zeichen zwischen Links

Ältere Screenreader zeigen Links auf einer Braille-Zeile unmittelbar hintereinander, wenn diese nicht durch Lehrzeichen und nichtverlinkte, ausdruckbare Zeichen getrennt werden. Da diese älteren Screenreader kein CSS unterstützen, dürfen diese Zeichen mittels CSS versteckt werden, damit sie in grafischen Browsern nicht angezeigt werden.

HTML

<ul>
  <li><a href="#">Startseite</a><span class="versteckt"> | </span></li>
  <li><a href="#" lang="en">Service</a><span class="versteckt"> | </span></li>
  <li><a href="#">Kontakt</a></li>
</ul>

CSS

.versteckt {
  display:none;
}

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

Browseransicht