Tutorial: Barrierefreie grafische Links
Möchte man eine Menüleiste erstellen, die eine ausgefallene Schriftart benutzt oder sich auf
Symbole stützt, wird man auf die Verwendung grafischer Linkbuttons nicht verzichten wollen.
Die aktuelle Seite ist ein Beispiel dafür.
Da in diesen Grafiken aber kein Text hinterlegt ist, stellt sich immer die Frage, was passiert,
wenn die Grafiken nicht angezeigt werden? Manche Besucher benutzen vielleicht reine Textbrowser,
andere haben das Anzeigen von Grafiken in ihrem Browser deaktiviert.
Trotzdem soll die Seite ja auch für diese Klientel funktional sein.
Oft vergessen werden leider Sehbehinderte. Sollen sie leichten Zugang erhalten,
muss die Seite von einem Programm vorgelesen werden können.
Und nicht zu vergessen der Googlebot, der die Webseite ja auch indizieren soll.
Zwar lassen sich Informationen auch aus HTML
Attributen wie "alt" oder "title" bekommen, aber barrierefreier ist es, alternativ zur Grafik auch
einen Textlink anzubieten.
Ein zweiter Aspekt dieses Tutorials ist die Erstellung eines Hovereffektes. Wenn die Maus über
dem Link steht, soll eine optische Veränderung bewirkt werden. Hier wird eine Lösung gezeigt, die mit
reinem CSS, ohne JavaScript, und einer einzigen
Grafik auskommt. So vermeidet man ein Flackern, wenn der Browser die Grafik für den Hoverstatus
lädt.
In diesem Beispiel sind in der Grafik beide Zustände schon vorhanden, sie wird nur anders positioniert.
Dadurch werden „Leerzeiten” durch das Laden einer zweiten Grafik vermieden.
Aber dazu später mehr.
Nun aber genug der einleitenden Worte, fangen wir am besten gleich an:
Schritt 1:
Als erstes werden natürlich die Links benötigt. Für dieses Beispiel wähle ich drei, um die Unterschiede besser gegeneinander stellen zu können. Der HTML Code sieht dafür vereinfacht so aus:
- <div id="div">
- <a href="/barrierefreie_grafische_links" title="Zurück zum Tutorial"><span></span>[ zurück ]</a>
- <a class="noimg" href="/barrierefreie_grafische_links" title="Zurück zum Tutorial"><span></span>[ zurück ];</a>
- <a href="/barrierefreie_grafische_links" title="Zurück zum Tutorial"><span></span></a>
- </div>
Dabei ist wesentlich, dass wir in den a-Elementen je ein span-Element
einfügen. Diese span-Elemente nehmen dann die Hintergrundbilder auf, unter denen
später die Alternativtexte liegen sollen.
Betrachtet man das
erste Beispiel,
erkennt man zwei Links, der dritte ist zunächst unauffindbar. Er hat ja auch noch keinen Inhalt
und keine Dimensionen, das kommt erst noch in
Schritt 2:
Hier geht es um die Gestaltung der span-Elemente. Zuvor gestalten wir aber noch
die „Menüleiste”. Das ist mit drei CSS Anweisungen erledigt:
- #div {
- border:1px solid black;
- background:#FFA500;
- height:35px;
- }
Der nächste Schritt für die span-Elemente ist auch nicht viel schwieriger.
Zunächst werden diese inline Elemente mit "display:block;" als Blockelemente definiert.
Dadurch ist es dann möglich die Ausmaße für diese Elemente festzulegen, in diesem Fall eine Höhe
von 35px und eine Breite von 100px. In CSS:
- #div a span {
- display:block;
- height:35px;
- width:100px;
- }
Sehen wir uns das Ergebnis nun an,
finden wir mit der Maus jetzt auch den dritten Link. Er ist zwar noch unsichtbar, befindet sich
aber unter dem zweiten Text "[ zurück ]". Man erkennt ihn dort, sofern man
den Cursor einige Zeit darauf zeigen lässt.
Aber schön ist das noch nicht. Gehen wir also direkt zu
Schritt 3:
Hier nehmen wir uns als erstes die Elternelemente a vor. Um sie nebeneinander auf der
Menüleiste zu platzieren, lassen wir sie links floaten. Dadurch wandeln wir sie auch gleichzeitig
in Blockelemente um, so dass die Dimensionsangaben übergeben werden können.
Auch hier 35px hoch und 100px breit. Mit margin:0; und padding:0; stellen wir sicher,
dass keine Abstände zu anderen Elementen bestehen. Nun sind die Links also in einer
Reihe nebeneinander, wie es sich für eine Navigationsleiste gehört.
Der CSS Code dazu sieht so aus:
- #div a {
- float:left;
- position:relative;
- margin:0;
- padding:0;
- height:35px;
- width:100px;
- }
Wichtig ist hier noch die relative Positionierung, da wir später die
Kindelemente span absolut positionieren müssen. Absolut positionierte Elemente
orientieren sich in ihrer Positionierung an dem nächst höheren Element, das selbst
positioniert ist. Den Effekt kann man gerne ausprobieren, indem man diese Anweisung probeweise
einmal löscht.
Ich möchte an dieser Stelle aber nicht weiter darauf eingehen.
Für die span-Elemente fügen wir folgendes CSS hinzu:
- #div a span {
- position:absolute;
- top:0;
- left:0;
- }
Schauen wir doch das bisher ereichte einmal an.
Schritt 4:
Nun fügen wir die Hintergundgrafik hinzu. Die Hintergrundgrafik ist 35px hoch und 200px breit,
also genau doppelt so breit wie der eigentliche Link.
Wie ersichtlich sind beide Grafiken, die für verschiedene Zustände der Links benötigt werden, in
dieser Grafik zusammengefasst.
Binden wir sie also für unser Beispiel mit einer CSS Anweisung ein:
- #div a span {
- background:url(explpics/backlink.gif) top left no-repeat;
- /* ...weiterer Code... */
- }
Mit dieser Anweisung geben wir den Pfad zu der gewünschten Grafik an, positionieren sie in der
linken oberen Ecke und sorgen dafür, dass sie nicht wie eine „Tapete” gekachelt wird,
sondern nur einmal angezeigt wird.
Für den Link in der Mitte laden wir kein Hintergrundbild, um den
Gegensatz zu demonstrieren.
Zudem stellen wie sicher, dass die Alternativtexte nicht über den
span-Elementen mit den Hintergrundbildern erscheinen, sondern darunter.
Das erreichen wir mit folgender Anweisung:
- #div a span {
- z-index:2;
- /* ...weiterer Code... */
- }
Sehen wir uns das Beispiel 4 an.
Sehr viel ist nun nicht mehr zu tun, also machen wir direkt weiter mit
Schritt 5:
Hier wird nun den Alternativtexten noch ein wenig Styling angeordnet. Die Texte werden zentriert,
bekommen die Farbe Schwarz und die Unterstreichungen werden entfernt.
Zudem wird dann ein Umbrechen der Texte bei enthaltenen Leerzeichen ausgeschlossen. Dafür fügen
wir in den CSS Block für das a-Element folgende Zeilen ein:
- #div a {
- text-align:center;
- color:#000;
- text-decoration:none;
- white-space:nowrap;
- line-height:35px;
- overflow:hidden;
- cursor:pointer;
- /* ...weiterer Code... */
- }
Mit line-height:35px; erreichen wir eine vertikale Zentrierung der Texte in der Zeile.
Durch overflow:hidden; wir vermieden, dass bei höherer Skalierung der Schriftgröße
die Alternativtexte unter den Grafiken hervor „blitzen” und sichtbar werden.
Für den dritten, ganz rechten Link wird die Hintergrundgrafik hier nicht mehr geladen, um zu zeigen,
wie sich ein Link ohne Grafik und ohne Alternativtext verhält.
Ein kleines Detail fehlt noch. Da der IE irgendwie
nicht mehr überblickt, dass es sich um a-Elemente handelt, zeigt er den für diese
Elemente typischen Cursor nicht mehr an. Mit cursor:pointer; wird auch das behoben.
Andere Browser stören sich daran nicht, und alles ist wieder in bester Ordnung.
Das Ergebnis sollten wir nun ansehen:
Als letzten Punkt nun zu den Hovereffekten, die wir realisieren wollen, also weiter mit dem
letzten Schritt:
Schritt 6:
Für die span-Elemente definieren wir im CSS für die Pseudoklassen hover
und focus folgende Anweisung:
- #div a:focus span,
- #div a:hover span {
- background-position:top right;
- }
Damit verschieben wir die Hintergrundgrafik von der linken oberen Ecke in die rechte obere Ecke.
Das ist schon der ganze Trick.
Da wir die Alternativtexte, obwohl sie den meisten Besuchern wohl nicht in Erscheinung treten werden,
trotzdem nicht vernachlässigen wollen, fügen wir noch einen kurzen CSS Block hinzu:
- #div a:focus,
- #div a:hover {
- background:#FF0;
- text-decoration:underline;
- }
Damit wäre nun das nötige CSS komplett.
Das fertige Ergebnis gibt es hier zu sehen.
Nun sehen wir am ersten Link, das Erscheinungsbild bei geladenen Grafiken.
Der mittlere Link ist auch ohne Hintergrundgrafik zugänglich, ja sogar ein
Hovereffekt ist verfügbar.
Der dritte Link dagegen besticht durch seine überaus unaufdringliche Präsenz. Fährt man nicht
gerade mit der Maus über ihn, bemerkt man ihn erst gar nicht. Solche Unterlassungssünden sind leider
nicht selten anzutreffen.
Ich hoffe, dieses Tutorial zeigt, welche Nachteile sich ergeben, wenn bei der
Gestaltung von grafischen Links auf Alternativtext verzichtet wird. Ohne geladene Grafiken
wird das Konstrukt dann eigentlich unbenutzbar.
Diese Technik des „image replacement” eignet sich auch für andere Anwendungsbereiche vorzüglich.
Werden z.B. für Überschriften Grafiken eingesetzt, um eine besondere Schriftart zu verwenden, so
empfiehlt es sich auch hier Alternativtext anzubieten. Sonst verschwinden mit den Grafiken die
Überschriften genauso endgültig, wie der rechte Link in dem Beispiel 6.
Zudem werden die Alternativtexte der entsprechenden Überschriften dann auch sehbehinderten
Besuchern vorgelesen.
Der vollständige CSS Code:
- #div {
- border:1px solid black;
- background:#FFA500;
- height:35px;
- }
- #div a {
- float:left;
- position:relative;
- height:35px;
- width:100px;
- margin:0;
- padding:0;
- white-space:nowrap;
- line-height:35px;
- overflow:hidden;
- cursor:pointer;
- color:#000;
- text-decoration:none;
- text-align:center;
- }
- #div a span {
- position:absolute;
- z-index:2;
- display:block;
- height:35px;
- width:100px;
- top:0;
- left:0;
- background:url(explpics/backlink.gif) top left no-repeat;
- }
- #div a:focus,
- #div a:hover {
- background:#FF0;
- text-decoration:underline;
- }
- #div a:focus span,
- #div a:hover span {
- background-position:top right;
- }