Barrierefreie Menüs sind kein Kompromiss, sondern eine große Hilfe für Webdesigner und User. Mittels CSS und einem sauberen HTML-Code lassen sich wunderschöne und komplexe Navigationen erstellen welche barrierefrei sind.
Ein barrierefreies Menü zeichnet sich durch folgende Eigenschaften aus:
- Es ist eine Überschrift vorangestellt
- als HTML-Tags wird UL, LI & A verwendet
- Beim A-Tag wird ein Title Atrribut angegeben
- Für die Bennenung des Menüeintrages wird Text verwendet
Im Klartext soll das heißen, dass folgende veraltete Techniken NICHT verwendet werden sollten:
- Tabellen (table – Tag)
- Bilder für den Inhalt
- kein img-Tag
Ein Beispiel, das nicht barrierefrei ist:
<table border="0"> <tbody> <tr> <td> <a title="Menüeintrag Eins" href="zieladresse"> <img src="images/menu1.gif" alt="Menüeintrag Eins" /> </a></td> </tr> <tr> <td> <a title="Menüeintrag Zwei" href="zieladresse"> <img src="images/menu2.gif" alt="Menüeintrag Eins" /> </a></td> </tr> </tbody></table>
Ein barrierefreies Menü:
<h1>Hauptmenü</h1> <ul> <li><a title="Menüeintrag Eins" href="zieladresse">MENÜNAME</a></li> <li><a title="Menüeintrag zwei" href="zieladresse">MENÜNAME</a></li> </ul>
Vorteile von barrierefreien Menüs gegenüber klassischen Table-Manüs:
- Das Aussehen kann jeder Zeit leicht und schnell geändert werden
- Es ist einfach verschiedene Layouts für verschiedene Ausgabemedien anzufertigen (Monitor, Drucker, Brailleschrift-Lesegeräte)
- Die Menüs sind Suchmaschinen freundlicher und werden BESSER Bewertet.
Freie Gestaltungsmöglichkeiten optischer Anpassung
Erinnern wir uns an den Code eines Liste-Menüs:
<h1>Hauptmenü</h1> <ul> <li><a title="Menüeintrag Eins" href="zieladresse">MENÜNAME</a></li> <li><a title="Menüeintrag zwei" href="zieladresse">MENÜNAME</a></li> </ul>
damit erhalten wir folgende Ausgabe:
Unser Menü sieht jetzt natürlich nicht sehr attraktiv aus, also wollen es mit CSS etwas verschöner:
* { margin: 0px; padding: 0px;} li { list-style-type: none; }
Mit diesen zwei Angaben erreichen wir vorerst wichtige allgemeine Vorteile. Mit *{…} sprechen wir alle Elemente in unserem HTML Dokument an und definieren, dass diese keine Innen- und Außenabstände haben. Das ist sehr vorteilhaft, da die verschiedenen Browser verschieden große Innen- und Außenabstände generieren. Indem wir dies verhindern, können wir viel genauer Arbeiten. Mit der zweiten Angabe legen wir lediglich fest, dass unsere Liste keine Listenzeichen hat.
Damit erhalten wir folgendes Aussehen:
Als nächstes wollen wir dem Ganzen ein wenig Farbe geben:
h1, ul { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 99%; margin-bottom: 11px; width: 160px;} ul li a { color: #FFFFFF; text-decoration: none; background-color: #FF6600; font-size: 12px; padding: 2px; border: 1px solid #990000; display: block; height: 15px; margin-bottom: 2px; }
Unser Menü sieht nun bereits etwas besser aus. Wenn uns die Überschrift “Hauptmenü” stört, wir aber dennoch wegen Google diese im Code belassen wollen, dann können wir sie für das menschliche Auge einfach verschwinden lassen:
h1 { display: none; }
Mehrere Ebenen
Oft sind Untermenüs bei Navigationen erforderlich und sinnvoll. Um diese ebenfalls barrierefrei zu gestalten, müßen wir den folgenden Code verwenden:
<h1>Hauptmenü</h1> <ul> <li> <a title="Menüeintrag Eins" href="zieladresse">MENÜ</a> <ul> <li> <a title="Menüeintrag Eins" href="zieladresse">UNTER-MENÜ</a></li> </ul> </li> </ul>
Grenzenlose Gestaltung bei UL-Menüs mittels CSS
Auf diese Weise können wir sowohl horizontale wie auch vertikale Menüs gestalten. Auch dynamische Menüs wie Drop-Down-Menüs lassen sich mit der einfachen Kombination von HTML und CSS erzeugen. Auch Hintergrundbilder können für die Menüeinträge verwendet werden, womit wir freie Hand bei der Gestaltung des Aussehens haben.