Das perfekte Menü: Teil 8 – Barrierefreies Rollmenü

Kein Beitragsbild

 Sponsorenliebe

Endlich smarte Buchhaltung!

We Billing

Irgendwie barrierfrei sind sie alle – aber worauf kommt es wirklich an bei der barriefreien Navigation? Wir kümmern uns um die Details und basteln ein nach allen Regeln der Kunst vorschriftsmäßiges Menü mit Aufroll-Effekt – ohne Java-Script.

Das attraktive Rollmenü geht kategorisch vor, Untermenüs rollt es erst bei Bedarf aus. Es ist platzsparend und bestens geeignet für die geordnete, wohlstrukturierte Darbietung. Unsichtbar unter der Oberfläche verborgen, bauen wir die Funktionen ein, mit denen auch Screenreader und Co. den Auftritt nicht verpassen.

Screenshot Barrierefreies Rollmenü
Ein Menu, das auch der Screenreader versteht

Live Demo im neuen Fenster: Barrierefreies Rollmenü

Als gültige Richtlinien für Barriefreiheit orientieren wir uns an der WCAG 2.0 (Web Content Accessibility Guidelines) und der BITV (Barrierefreie Informationstechnik-Verordnung).

HTML-Quelltext

 <a id="skiplink" href="#inhalt">Navigation
  &uuml;berspringen</a>

<div id="nav"> 
<ul class="liste"> 
<li><a class="hier" href="#">Rubrik eins</a> 
  <ul class="sub"> 
    <li><a href="nav-1a.html">eins
a</a></li> 
    <li><a href="nav-1b.html">eins
b</a></li> 
    <li><a href="nav-1c.html">eins
c</a></li> 
  </ul> 
</li> 
<li><a href="nav-2.html">Rubrik zwei</a></li> 
<li><a href="nav-3.html">Rubrik drei</a></li> 
<li><a href="nav-4.html">Rubrik vier</a></li> 
</ul> 
</div>

<a name="inhalt"></a>

Wir fügen als erstes einen Link ein, dessen einziges Ziel es ist, die Navigation überspringen zu können, um direkt zum Inhalt zu gelangen. Wer am Screenreader oder an sonstigen Hilfsgeräten sitzt, möchte sich nicht auf jeder Seite wieder durch sämtliche Menüpunkte hangeln müssen. Auf dem Bildschirm machen wir den Skiplink später mit CSS unsichtbar.

Beliebtes Grundgerüst so gut wie jeder modernen Navigation ist eine Ungeordnete Liste <ul>. Untermenüpunkte bauen wir in das <li> der übergeordneten Hauptrubrik ein. Das Geheimnis dynamisch ausgerollter Untermenüs ohne Skript-Unterstützung ist, dass wir die Unterpunkte gar nicht verstecken, sondern mit der Seite verlinken, auf der sie sichtbar sind. Profis erkennen den Trick daran, dass zum Ausrollen immer ein Klick nötig ist – hovern reicht nicht!

Im Quelltext oben bauen wir die Navigation mit ausgerolltem Untermenü für die Rubrik eins zusammen. Die Konstruktion der anderen Ebenen erfolgt analog. Die Haupt-<ul> erhält class=”liste”, der Unter-<ul> geben wir class=”sub”. Der Link zum Menüpunkt der aktuellen Seite erhält class=”hier”, und für den Fall, dass die aktuelle Seite ein Untermenüpunkt ist, halten wir class=”hier2″ für den übergeordneten Hauptmenüpunkt bereit.

CSS-Code

      html, body, ul { margin: 0; padding: 0; } 

#nav { width: 8em; margin: 2px ; } 

#nav a { width: 100%; display: block; } 

ul { list-style-type: none; } 

ul.liste li { margin: 1px 0; } 

ul.sub li { margin-right: 12px; } 

Wir bereiten das Spielfeld vor, setzen Standardwerte auf Null und bestimmen die Breite der Navigation. Eine Bedingung für Barrierefreiheit sind frei skalierbare Schiften. Mit der Größenangabe in em (width= 8em) setzten wir die Breite in Beziehung zur im Browser eingestellten Schriftgröße. Das ist sehr praktisch, die Navigationsleiste wächst mit.

Dank #nav a { width: 100%; display: block; } können wir die Links schön übereinanderstapeln, gleichzeitig machen wir sie auf ganzer Breite klickempfindlich. Die Standard-Aufzählungszeichen von <ul> schalten wir ab (list-style-type: none). Die Menüpunkte rücken wir mit einem Pixel padding oben und unten etwas auseinander (margin: 1px 0;). Die Erklärung für mysteriöse 12px margin ( margin-right: 12px;) findet sich weiter unten.

       ul.liste a { 
  padding: 10px 0 10px 16px; 
  background-color: #009FFF; 
  border-left: 6px solid #000080; 
  color: #fff; 
  font-family: Arial, Helvetica, sans-serif; 
  text-decoration: none; } 

ul.sub a { 
  padding-left: 28px; 
  background-color: #fff; 
  border-left: 6px solid #AADFFF; 
  color: #000; 
  font-style: italic; } 

ul.liste a:hover { 
  background-color: #AADFFF; 
  text-decoration: underline; } 

ul.sub a:hover { background-color: #fff; } 

10px padding oben und unten sorgen für die richtige Höhe, mit 16px padding links schieben wir den Linktext etwas vom Rand weg. Bleiben noch Hintergrundfarbe (#009FFF), Rahmenbalken links in #000080, Schriftart (Arial, Helvetica oder Sans-Serif), Schriftfarbe (#FFF) und das Abschalten der Standard-Link-Unterstreichungen mit text-decoration: none.

Die Links im Untermenü rücken wir einen Tick weiter ein (padding-left: 28px), verändern die Farben und setzen die Schrift auf italic. Aus der Differenz zwischen dem padding (28px) und dem Abstand, um den wir die Links vom Rand weggerückt haben (16px), ergeben sich die 28px-16px=12px margin, um die wir oben die <li> im Untermenü gekürzt haben. Die Einträge würden sonst 12px an der Seite überstehen.

Gleiches Spiel mit dem :hover-Zustand, neue Hintergrundfarben – getrennt für Hauptrubrik (#AADFFF) und Untermenü (#FFF) – und stilsichere Wiederbelebung der Linkunterstreichung beim hovern im Untermenü.

      ul.liste a.hier { 
  background-color: #AADFFF; 
  border-left: 6px solid #ff0000; 
  color: #ff0000; } 

ul.sub a.hier { background-color: #fff; } 

ul.liste a:hover.hier { text-decoration: none; } 

ul.liste a.hier2 { 
  background-color: #AADFFF; 
  border-left: 6px solid #000080; 
  color: #000; } 

a#skiplink { 
  position: absolute; 
  left: 0px; top: -500px; 
  width: 1px; height: 1px; 
  overflow: hidden; }

Abschließend noch das Finetuning der Anzeige der aktuellen Seite im Menü. Wir haben einen ausgewählten Hauptmenüpunkt (ul.liste a.hier), einen ausgewählten Unterpunkt (ul.sub a.hier) mit dazugehöriger Rubrik (ul.liste a.hier2) und den aktuellen Hauptmenüpunkt beim hovern (ul.liste a:hover.hier), die wir alle getrennt mit Farben, Rahmen und Textdekoration ausstatten.

Screenshot Rollemenü mit abgeschalteten Stylesheets

Macht auch ohne CSS eine gute Figur, Rollmenü mit abgeschalteten Stylesheets

Die sicherste Möglichkeit den Skiplink so zu formatieren, dass er von Hilfsgeräten erkannt, nicht aber auf dem Bildschirm angezeigt wird, ist es, ihn oben aus dem dargestellten Bereich hinauszuschieben (position: absolute; left: 0px; top: -500px;), auf die Größe von einem Pixel zu reduzieren (width: 1px; height: 1px;) und überlaufenden Inhalt zu verstecken (overflow: hidden;).

Lesegeräte müssen wissen, in welcher Sprache ein Dokument vorgelesen werden soll. Die Angabe dazu gehört in die HTML-Deklaration:

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">

Bei der Auswahl der Faben ist auf ausreichenden Kontrast zu achten. Spezielle Farbkombination, die Farbblinde nicht gut unterschieden können, beispielsweise rot und grün sollte man meiden. Die im Beispiel gewählten Farben sind akzeptabel, wer hier ganz auf Nummer sicher gehen will, sollte den Kontrast zwischen Hintergrund- und Texfarbe der Hauptmenüpunkte noch erhöhen.

Wichtig ist, dass die Navigation auch ohne optische Kennzeichnungen verständlich ist. Wenn die Linkbeschriftung alleine nicht ausreicht, um zu beschreiben, worum es geht, sollte der title-Tag zusätzliche Angaben enthalten.

Je nach Einbauart des Menüs sollte auf der Seite noch ein Link zurück zur Startseite angebracht oder ein entsprechender Menüpunkt eingerichtet werden.

Beispiele zum Download

Getestete Browser: IE 6.0, 7 Beta 3, Firefox, Mozilla, Opera ab 7.1, Netscape ab 7.2. ™

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.