Tag 2: Wie wird ein Navigationsmenü barrierefrei?

Am ersten Tag wurde eine Codierung auf der Basis von Listen entwickelt. Diese ist zwar standardkonform, aber noch nicht ausreichend, um ein Menü auch in der Praxis tatsächlich barrierefrei zu machen. Das ist aber kein Argument gegen die Anwendung von Webstandards, im Gegenteil. Standardkonformes Codieren liefert mindestens 80% Barrierefreiheit. Der Rest ist bedingt durch inhaltsabhängige Auszeichnungen wie Sprachwechsel oder generell der angewendeten Sprache, die manchen Benutzergruppen nicht zugänglich ist. Oder durch Schwächen in den Spezifikationen. Auch bestehen zahlreiche Fehler in den Ausgabeprogrammen, die man zumindest vorübergehend durch zusätzliche Einbauten kompensieren sollte. Wir stellen verschiedene strukturelle, sprachliche und visuelle Möglichkeiten vor, die Barrierefreiheit umzusetzen.

Tags: , ,

Stand: 29.08.2005, Autoren: sb, ep

Ebenen und Links nummerieren

Eine generelle Herausforderung stellt die Abbildung der Informationsarchitektur dar. Die Struktur eines Internetauftrittes ist in linearisierten Darstellungen (beispielsweise in Screenreadern, Textbrowsern oder ähnlichen) oft schwer nachvollziehbar, vor allem wenn man sich vergegenwärtigt, dass eine Navigation immer in einer gewissen Bewegung ist, wenn bei Seitenwechseln die Untermenüs wechseln oder erweitert werden. Immer häufiger kommen Besucher auch nicht mehr über die Startseite, sondern beispielsweise über Suchmaschinen direkt auf bestimmte Inhaltsseiten, so dass auch hier ein intuitives Erfassen der Seitenstruktur ermöglicht werden sollte. Eine geeignete Lösung innerhalb der Navigationsmenüs stellt die Nummerierung von Links ähnlich einem (virtuellen) Inhaltsverzeichnis dar. Diese Nummerierung kann auch in breadcrumb-Navigationen oder Sitemaps übernommen werden.

Wie oben bereits angedeutet, sind nummerierte Listen (ol>) dafür nicht geeignet. Die Ordnungszahlen müssen also hinzugefügt werden. Versteht man eine Navigationsleiste als Auszug der gesamten Informationsarchitektur, sind die Links durch ihre Verortung, die durch Ordnungszahlen ausgedrückt wird, definiert. Für solche Fälle steht in den HMTL-Spezifikationen das dfn>-Element zur Verfügung. Die Ordnungszahlen können in visuellen Browsern ausgeblendet werden, so dass keine Einschränkungen hinsichtlich der Designwünsche entstehen. Oder sie können - wie bei unserem später folgenden Gestaltungsbeispiel - auch eingeblendet bleiben. Schließlich sind sie für alle Benutzer sinnvoll. Der Menüeintrag, der wegen seines aktuellen Aufrufs nicht aktiv ist (bzw. sein sollte), wird um ein zusätzliches "Standort" ergänzt, um die Orientierung zu erleichtern. Der Code unseres Beispiels sieht nun so aus:

  1. <!-- Die Liste für die erste Ebene -->
  2. <ul>
  3. <li><a href="foo.html"><dfn>1 </dfn>Struktur</a>
  4. <!-- Einbettung der Liste für die zweite Ebene -->
  5. <ul>
  6. <li><a href="foo.html" title="Über das div-Element">
    <dfn>1.1 </dfn>Bereiche</a></li>
  7. <li><strong><span class="hier">Standort: </span>
    <dfn>1.2 </dfn>Listen</strong></li>
  8. </ul></li>
  9. <-- Ende der Einbettung der zweiten Ebene -->
  10. <li><a href="foo.html"><dfn>2 </dfn>Gestaltung</a></li>
  11. </ul>

Syntaktisch ist wichtig, dass nach der letzten Zahl, also nach der Ordnungszahl des Links kein Punkt sowie ein Leerzeichen folgen. Dadurch wird verhindert, dass Screenreader zweistellige Ordnungszahlen wie z. B. in dfn>1.2.<dfn> als "Erster Februar" auslesen. Ebenso sollte die Ordnungszahl innerhalb des Link-Elements stehen, schließlich ist sie - wie oben erläutert - der definierende Teil des selben. Dieses Konzept ist nicht ganz perfekt, denn manche Vorlesegeräte generieren in der dritten Navigationsebene ebenfalls eine Datumsangabe. Der zehnte Link einer dritten Ebene könnte beispielsweise die Ordnungszahl dfn>1.2.10 <dfn> haben und wird als "Erster Februar Zehn" ausgelesen. Aber immerhin tritt dieses Phänomen nur bei zweistelligen Links der dritten Ebene auf. Man sollte jedoch davon ausgehen können, dass Benutzer diesen "maschinellen Zwang" der Geräte durch die Zusammenhänge richtig umdeuten können.

Erwähnenswert an dieser Stelle ist noch, dass durch die Nummerierung der Listeneinträge eine Navigationsfunktion, die in manchen Screenreadern zur Verfügung steht, nicht mehr genutzt werden kann. Das Auffinden von Links durch eine Suchfunktion, bei der die Anfangsbuchstaben eingegeben werden, ist nicht mehr möglich, da die Nummerierungen am Anfang des Linknamens stehen. Manche Entwickler stellen die Nummern zwischen den li>-tag und den Link. Strukturell macht das letztlich keinen Unterschied, aber die Nummerierung wird dann bei der üblichen Navigation durch Tabben überhaupt nicht angesprochen. Dadurch geht der gewünschte Effekt noch mehr verloren.

Der Listeneintrag der aufgerufenen Seite wird beim Navigieren mit der Tabulatorentaste übersprungen, da diese Funktion nur für Formularelemente und Links zur Verfügung steht. Auch hier hilft die Nummerierung der Links. Da beim Tabbing der Eintrag für die aufgerufene Seite übersprungen wird, fehlt eine der Ordnungszahlen in ihrer kontinuierlichen Reihenfolge. Dies ist aber kein Mangel, sondern ein Hinweis, wo sich die aktive Seite in der Informationsarchitektur befindet. Ein Screenreader-Benutzer kann dann gegebenenfalls zurücknavigieren und sich den Linknamen der aufgerufenen Seite vorlesen lassen.

Links trennen

Die BITV, Anforderung 10.5, fordert die zusätzliche Einbindung eines Trennelementes. Nicht getrennte Links können je nach Nutzerumgebung zu einem Bandwurmeffekt führen, der Linkfolgen am Stück ausgibt. Das Navigieren kann so für manche User visuell, haptisch und/oder auditiv zu einer großen Hürde werden. Aktuell gibt es zwar innerhalb von Listenmenüs sehr wenige Nutzungssituationen, wo dies wirklich problematisch zu sein scheint, aber um alle denkbaren Benutzer- und Gerätebedingungen absichern zu können, erscheint der Einsatz eines zusätzlichen, druckbaren (Interims-)Trennelement nach wie vor sinnvoll. Entgegen der Formulierung in der BITV, die sowohl vor als auch nach dem Trennzeichen einen blank fordert, ist ein Leerzeichen nach dem Punkt ausreichend. Es verhindert die Aneinanderkettung in Braille-Zeilen. Dies gilt aber nur für den Punkt als Trennzeichen!

Welches Trennzeichen verwenden?

Als optimales Trennzeichen hat sich im deutschsprachigen Umfeld der Punkt erwiesen: zum einen wird er - wenn überhaupt - kurz ausgesprochen ("Punkt"), zum anderen sorgt er in Screenreadern als einziges Zeichen für eine ausreichend lange Sprachabsenkung und Sprechpause, um die Trennung kenntlich zu machen. Auf den im englischen Sprachraum üblichen | sollte man hier nicht zurückgreifen. Er hat sich dort wegen der Audio-Ausgabe "bar" sinnvollerweise durchgesetzt, ist aber im Deutschen ("Senkrechter Strich") unnötig lang. Einen adäquaten Einsatz bietet die Ergänzung von (Navigations-)Elementen um folgendes Schnipsel, das mit einem zusätzlichen Klassennamen ausgezeichnet wird, um Kollisionen mit anderen span>-Elementen zu vermeiden: span class="unsichtbar">. </span>

(Zwischen-)Überschriften und Menü-Bereich

Eine Navigation als Gesamtkonzept wird sicherlich nicht nur mit einem Menü ausgestattet sein, sondern auch mit Sprungmarken zu zentralen Stellen. Hinsichtlich der Navigationsmenüs ist es deshalb sinnvoll, (Zwischen-)Überschriften einzufügen, die das Folgende zusätzlich ankündigen. Solche Überschriften sind vor allem bei umfangreichen Internetauftritten nützlich, da man dadurch einzelne Themennavigationen deutlicher und übersichtlicher machen kann. Hinsichtlich der Überschriftenhierarchie wird man hier in der Regel keine h1 einsetzen, da diese dem Gesamtauftritt oder der Hauptüberschrift des Inhaltes vorbehalten sein sollten.

Damit ist die Strukturierung des Menüs abgeschlossen und es ergibt sich folgender Ausgabecode:

  1. <div id="menue">
  2. <h2>Navigation</h2>
  3. <!-- Die Liste für die erste Ebene -->
  4. <ul>
  5. <li><a href="foo.html"><dfn>1 </dfn>Struktur</a>
    <span class="unsichtbar">. </span>
  6. <!-- Einbettung der Liste für die zweite Ebene -->
  7. <ul>
  8. <li><a href="foo.html" title="Über das div-Element"><dfn>1.1 </dfn>
    Bereiche</a><span class="unsichtbar">. </span></li>
  9. <li><strong><dfn>1.2 </dfn><span class="unsichtbar">Standort:
    </span>Listen</strong><span class="unsichtbar">. </span></li>
  10. </ul></li>
  11. <-- Ende der Einbettung der zweiten Ebene -->
  12. <li><a href="foo.html"<dfn>2 </dfn>Gestaltung</a>
    <span class="unsichtbar">. </span></li>
  13. </ul>
  14. </div>

Als nächstes widmen wir uns einem Beispiel, wie diese Codierung mit CSS-Design gestaltet werden kann und welche Umsetzung hier für die Barrierefreiheit zuträglich ist.

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