Beispiele aus dem Buch (Abschnitt 2.3: Verständlichkeit, Navigation und Orientierung)
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 ...