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.

"mehr"-Links

Vor allem bei der Verwendung von Sprachausgaben wird von Link zu Link auf einer Seite mit der Tabulatorentaste navigiert oder: es werden Linklisten einer Seite abgerufen. Es besteht also die Notwendigkeit, verlinkte Texte so zu gestalten, dass sie eindeutig und "sprechend" sind.

Das folgende stellt ein Negativbeispiel dar. Dieses Beispiel wird Schritt für Schritt verbessert und stellt am Ende ein Positivbeispiel dar.

HTML

<h3>Barrierefreier Informationszugang für alle Internetnutzer</h3>
<p><img src="blogo.gif" alt="BIK-Logo" width="68" height="70" class="bikLogo" /> BIK prüft Internetauftritte von 14 großen Tageszeitungen und Magazinen auf Barrierefreiheit. Erste Ergebnisse werden Mitte Mai erwartet. <a href="#demoseite">mehr ...</a></p>
<div class="clearMe"></div>

CSS

h3 {
  padding-bottom: 10px;
}
.bikLogo {
  float: left;
  margin: 0 10px 5px 0;
}
.clearMe {
  clear: both;
}

Browseransicht

Barrierefreier Informationszugang für alle Internetnutzer

BIK prüft Internetauftritte von 14 großen Tageszeitungen und Magazinen auf Barrierefreiheit. Erste Ergebnisse werden Mitte Mai erwartet. mehr ...

Das "mehr" ist kein "sprechender Link". Links müssen für sich stehen können und außerhalb ihres Kontextes aussagekräftig sein. Ein eindeutiger Text ist beispielsweise die Überschrift:

HTML

<h3><a href="#demoseite">Barrierefreier Informationszugang für alle Internetnutzer</a></h3>
<p><img src="blogo.gif" alt="BIK-Logo" width="68" height="70" class="bikLogo" /> BIK prüft Internetauftritte von 14 großen Tageszeitungen und Magazinen auf Barrierefreiheit. Erste Ergebnisse werden Mitte Mai erwartet. <a href="#demoseite">mehr ...</a></p>
<div class="clearMe"></div>

Browseransicht

Barrierefreier Informationszugang für alle Internetnutzer

BIK prüft Internetauftritte von 14 großen Tageszeitungen und Magazinen auf Barrierefreiheit. Erste Ergebnisse werden Mitte Mai erwartet. mehr ...

Um dem intuitiven Verhalten des Benutzers entgegen zu kommen, die Grafik anzuklicken, kann die Grafik per JavaScript anklickbar gemacht werden.

HTML

<h3><a href="#demoseite">Barrierefreier Informationszugang für alle Internetnutzer</a></h3>
<p><img src="blogo.gif" alt="BIK-Logo" width="68" height="70" class="bikLogo" onclick="document.location.href='#demoseite';" onmouseover="if(document.all && navigator.userAgent.indexOf('Opera') == -1) { this.style.cursor = 'hand' } else { this.style.cursor = 'pointer' };" /> BIK prüft Internetauftritte von 14 großen Tageszeitungen und Magazinen auf Barrierefreiheit. Erste Ergebnisse werden Mitte Mai erwartet. <a href="#demoseite">mehr ...</a></p>
<div class="clearMe"></div>

Browseransicht

Barrierefreier Informationszugang für alle Internetnutzer

BIK prüft Internetauftritte von 14 großen Tageszeitungen und Magazinen auf Barrierefreiheit. Erste Ergebnisse werden Mitte Mai erwartet. mehr ...

Wenn auf den "mehr"-Link nicht verzichtet werden kann, dann muss dieser Link durch ein entsprechendes title-Attribut ergänzt werden.

Anmerkung (Dezember 2008): Die Technik mit title wird nicht mehr als barrierefrei erachtet.

HTML

<h3><a href="#demoseite">Barrierefreier Informationszugang für alle Internetnutzer</a></h3>
<p><img src="blogo.gif" alt="BIK-Logo" width="68" height="70" class="bikLogo" onclick="document.location.href='#demoseite';" onmouseover="if(document.all && navigator.userAgent.indexOf('Opera') == -1) { this.style.cursor = 'hand' } else { this.style.cursor = 'pointer' };" /> BIK prüft Internetauftritte von 14 großen Tageszeitungen und Magazinen auf Barrierefreiheit. Erste Ergebnisse werden Mitte Mai erwartet. <a href="#demoseite" title="zu den Ergebnissen des BIK-Zeitungen-Tests">mehr ...</a></p>
<div class="clearMe"></div>

Browseransicht

Barrierefreier Informationszugang für alle Internetnutzer

BIK prüft Internetauftritte von 14 großen Tageszeitungen und Magazinen auf Barrierefreiheit. Erste Ergebnisse werden Mitte Mai erwartet. mehr ...