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.

Selbsterklärende Links

Generell sollte dem Benutzer mitgeteilt werden, was passiert, wenn der Link betätigt wird. Beispielsweise sollte angegeben werden, ob ein neues Fenster geöffnet wird. Dies kann z.B.

gestaltet werden.

Anmerkung: Die Technik mit title wird nicht mehr emfohlen. Weitere Informationen zur Einbindung von Symbolen per CSS finden Sie in dem Beitrag Inhalte mit CSS? Aber bitte ohne Hintergrundgrafiken!.

HTML

<p>Wollen Sie wissen wie es andere machen?<br />
In unserer <a href="#" title="zur Linkliste" class="gleichesFenster">Link-Liste</a> finden Sie bestimmt viele gute Beispiele.</p>
<p><a href="#" title="Beispiel anzeigen: Die Hilfe wird in einem neuen Fenster geöffnet" class="neuesFenster">Hilfe zur aktuellen Seite</a></p>

CSS

a.gleichesFenster:after {
  content:" ("url(fenster_gleich.gif)")";
}
a.neuesFenster:after {
  content:" ("url(fenster_neu.gif)")";
}

Browseransicht

Wollen Sie wissen wie es andere machen?
In unserer Link-Liste finden Sie bestimmt viele gute Beispiele.

Hilfe zur aktuellen Seite

Screenshot

Screenshot dieses Beispieles