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.

Hintergrundgrafiken mit Informationsgehalt

Im folgenden Negativbeispiel wird eine Information ("freiwillige Angabe") als Hintergrundbild in die Seite eingebunden. Diese wird bei benutzerdefinierten Farben nicht angezeigt. Der versteckte Text soll in nicht CSS-fähigen Browsern als gleichwertige Information dienen, jedoch funktioniert dies nur in Einzelfällen. Wenn der Benutzer zum Beispiel die Farben der Webseite ignoriert, sind die Informationen der Überschrift komplett nicht sichtbar.

HTML

<div class="kopfzeile">
  <h1 class="versteckt">Freiwillige Angaben</h1>
  </div>
<p>Weiterer Text</p>

CSS

.kopfzeile {
  background-image: url(option.png);
  background-repeat: no-repeat;
  font-size: 1.5em;
}
.versteckt {
  visibility: hidden;
}

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

Browseransicht

Freiwillige Angaben

Weiterer Text