Navigation mit Grafik-Buttons

[wandler]

Hallo, wie erstellt man eine Navigation, mit Grafik-Buttons als Horizontal-Liste, damit diese möglichst Barrierearm sind (muss Grafiken benutzen, damit ich die Breite festlegen kann)? Bin noch css-Anfänger.

 

[planet4]

hallo,
ist die Breite der einzige Grund, warum du Grafiken benutzten musst?
die Breite kannst du auch über css festlegen.

wenn man Grafiken für die Navigation wirklich benutzen muss, dann gibt man dem
Bild ein title="" mit, in dem man schreiben kann, wohin es geht, außerdem kann man noch
alt="" (also Alternativtext fürs Bild) vergeben, einen Tab-Index (legt die Reihenfolge
fest, in der die Navigationspunkte mit Tab-Taste durchlaufen werden) und accesskey=""
(gibt die Tastaturbelegung an)

planet4.

 

[wandler]

Hallo,

ist die Breite der einzige Grund, warum du Grafiken benutzten musst?
die Breite kannst du auch über css festlegen..

Ja eigentlich schon, aber "max-width" wird doch vom IE nicht unterstützt (bzw. nur fehlerhaft).

Was ich eigentlich wissen wollte ist, wie binde ich die Grafik-Buttons in eine Liste ein, so das ohne Stylesheet die Navigation als Liste dargestellt wird (für Screenreader)?


wandler

 

[dkdenz]

Also, ich schreib das jetzt mal so aus'm Kopf auf.
Deine Liste müsste im HTML-Dokument so ausehen:

<ul><li style="float:left">menuepunkt01</li><li>menuepunkt02</li></ul>

Damit die Listenpunkte weg sind, sowas in die CSS:

ul {
list-style-type:none;
}

Die Bilderlinks machst Du in etwa so:

a.link01:link, a.link01:visited, a.link01:hover, a.link01:active {
  display:block;
  width:150px;
  height:20px;
  font-size:1px; 
  color:#000;
  text-decoration:none;
  background:url(bild_normal.jpg);
}
a.link01:hover {
  background:url(bild_hover.jpg);
}

Die Schriftgrösse wird auf einen Pixel festgelegt, damit der Screenreader auch was zum readen hat.
Als color würde ich dann die Hintergrundfarbe des Bildes nehmen.
Das ist eigentlich grob das, was Du suchst.