Tutorium: Barrierefreie Navigationsmenüs

Navigationsmenüs sind neben der Qualität der Inhalte und den interaktiven Angeboten der Garant für den Erfolg eines Internetauftritts. Übersichtliche, zugängliche und benutzerfreundliche Menüs haben entscheidenden Einfluss auf die Orientierung, die Verweildauer von Besuchern und damit auf die Erreichung der Ziele eines Angebotes.

Tags: , ,

Stand: 29.08.2005, Autoren: sb, ep

Auch rückt zunehmend - teils aus freiem Willen, teils aus gesetzlichen Vorgaben - die Barrierefreie Informationstechnik-Verordnung (BITV) ins Blickfeld des öffentlichen Interesses. Die BITV fordert auf Basis der Web Content Accessibility Guidelines 1.0 (WCAG) die Barrierefreiheit unter anderem in Navigationen. Entwickler, Gestalter und Anbieter stehen hier vor der Herausforderung, unter Berücksichtigung geräteabhängiger Ausgabeunterschiede geräteunabhängig Informationsarchitektur, Zugänglichkeit, Nutzerfreundlichkeit und Design auf einen Nenner zu bringen.

Die Herausforderungen

Ein Navigationsmenü muss viel leisten können. Besonders dann, wenn man es beispielsweise in umfangreichen Seiten oder Portalen mit mehreren Ebenen und zahlreichen Angeboten zu tun hat. Links sollen erkannt, aber von aktuell aufgerufenen oder bereits besuchten Seiten unterschieden werden können. Auch Navigationsebenen und -unterebenen sollen möglichst für alle identifizierbar sein. Die visuelle Gestaltung kann hier hinsichtlich der intuitiven Benutzerführung viele Orientierungshilfen anbieten. Doch manche Ausgabegeräte wie Textbrowser, PDAs, Webreader oder entsprechend konfigurierte Standardbrowser sowie Menschen mit Sehbehinderungen erhalten solche visualisierten Darstellungen nicht. Je nach Umsetzung wird den Besuchern das Navigieren oft erschwert oder sogar unmöglich gemacht.

Dieses praxisbezogene Tutorial zeigt, wie solche Menüs auf der Basis von Webstandards und CSS (Cascading Style Sheets) technisch, gestalterisch und inhaltlich so strukturiert werden können, dass Benutzer auch in komplexen Navigationsmenüs die Orientierung behalten. Die Verwendung von XHTML und die strikte Trennung von Layout und Inhalt sichern hierbei auch die Zukunftsfähigkeit. Gemäß dieser Urforderung des Internets wird zunächst die Auszeichnung mit XHTML aufgebaut, ehe dann ein Gestaltungsbeispiel mit CSS erläutert wird. Abschließend erhalten Sie Einblick in unsere Testergebnisse und können sämtliche Hörproben von Screenreadern und Codes herunterladen. Die kaskadierende Navigationsleiste kommt ohne Javascript aus, funktioniert in allen von uns getesteten Ausgabegeräten und ist auch in komplexen Informationsarchitekturen anwendbar.

Wie Sie diese Menüs in Ihren Seiten umsetzen können, erfahren Sie in den folgenden Teilen dieser Serie.

Wir würden gerne Ihre Meinung wissen: Teilen Sie uns Ihre Erfahrungen mit und diskutieren Sie diesen Artikel mit anderen Experten.