CSS - barrierefreie grafische Navigation mit CSS

Beispiel aus dem typo3.net Forum von den Entwicklern der Seite Unicef.de

Das mit dem Top Menü ist eigentlich "relativ" einfach:

Das ganze ist ein unordered list mit den li als einzelne Links, also:

<ul>
<li><a href=""><span>Link 1</span></li>
<li><a href=""><span>Link 2</span></li>
<li><a href=""><span>Link 3</span></li>
</ul>

Die Liste als ganzes bekommt list-style:none; und <li> bekommt float:left; zugewiesen, damit die einzelnen Punkte horizontal nebeneinander erscheinen.

(Wenn Du grafische Links haben möchtest, dann weist Du dem ein lächerlich niedriges padding-left zu, z.B.

ul li a span {padding-left: -1000px;}

Dadurch verschwindet der Text nach links aus dem viewport (=kein Scrollbalken unten), wird aber von Screenreadern immer noch vorgelesen.)

Dem <a> weist Du eine absolute Höhe und Breite zu, und schaltest display: block; ein, damit die ganze Linkfläche angeklickt werden kann.

Jetzt kannst Du dem a und dem a:hover verschiedene Hintergrundgrafiken zuweisen, und voilà: "Buttons" mit Hovereffekt, ohne Javascript. Für den angewählten Zustand gibt es einfach eine eigene Klasse, "a.selected" bzw. <a class="selected"> mit einem eigenen Hintergrundbild.

Um den Hovereffekt ohne Nachladen hinzukriegen, machst Du einfach eine Grafik mit beiden Zuständen untereinander, also obere Hälfte normaler Link, untere Hälfte mit Hovereffekt. Und dann folgendes ins CSS:

a {
  background: url(grafik.gif) top left no-repeat;
}
a:hover {
  background: url(grafik.gif) bottom left no-repeat;
}

Falls das jetzt zu viel auf einmal oder unklar war, einfach noch mal nachfragen :-) -- Oli Grafik/XHTML-Sklave bei i-gelb