Ich war vorgestern morgen noch nicht mal richtig wach, da schrieb mich jemand über ICQ an und meinte, er hätte einen Vorschlag zu meinem Drop-Down-Menü mit CSS und (fast) ohne Javascript. Nach einem kleinen Test stellte sich dieser Vorschlag als ausgesprochen nützlich heraus, denn er macht auf einfache Art und Weise die alte Navigation für Screenreader lesbar.

Was ist anders?

Eine umgebaute Navigation ist weder optisch noch codeseitig großartig anders als eine Navigation alter Machart. Die Kernunterschiede: Die Navigationspunkte haben fest definierte Höhen und das „Verstecken“ der Untermenüs geschieht nicht durch Ausblenden via display:none; sondern dadurch, dass sie vom Elternelement abgeschnitten werden - overflow macht es möglich.

Das ist denkbar schwer in Worte zu fassen, also lassen wir CSS sprechen. Alt:

/* Normalzustand eingeklappt */
#navi li ul {
    display:none;
}

/* Ausgeklappt */
#navi li:hover ul {
    display:block;
}

Neu:

/* Normalzustand eingeklappt */
#navi > li {
    height:24px;
    overflow:hidden;
}

/* Ausgeklappt */
#navi > li:hover {
    height:auto;
    overflow:visible;
}

Angesichts dieser Zeilen dürfte es der geübte CSSler verstehen um was es geht. Diese Methode hat den großen Vorteil, von Screenreadern verstanden zu werden.

Navigation im Screenreader

Moderne Vorlese-Programme sind nämlich sehr exakte Maschinen, die vielleicht nicht unrichtig der Marschroute was nicht angezeigt werden soll, das lese ich nicht vor folgen. Das heißt, dass sich die alte Navigation vorgelesen so anhört, während die Neue wie folgt klingt.

Es zeigt sich: Die Navigation nach der neuen Methode wird vom Screenreader (in diesem Falle in der Kombination Jaws/Internet Explorer/Windows 2000) komplett vorgelesen, während beim alten Menü die Unterpunkte einfach verschluckt werden.

Ehre wem Ehre gebührt

Ausgebrütet hat diese Idee Sebastian Gebhard, der unter s.gebhard@friesenservice.de für Nachfragen und Lob bereit steht. Er bat mich um die Veröffentlichung, da ich seiner Ansicht nach mehr Leute erreichen könnte als er. Dafür ist seine Beispiel-Navigation viel schöner als meine.

Letzte Anmerkungen

Überflüssige Scrollbalken in Opera

Opera hat zur Zeit Probleme mit overflow, die zu überflüssigen Scrollbalken an den Navigationsleisten führen. Das ist nicht schön, aber eben ein nicht zu ändernder Programmfehler. Dieser Fehler kann dazu führen, dass das Menü gar nicht mehr benutzbar wird, weswegen gründliches Testen (natürlich) nötig ist.