Ein Rückblick auf das Jahr 2004 zeigt, dass <link 64 _top internal-link "Barrierefreie Internetseiten haben viele Vorteile">barrierefreie Internetseiten zum größten Teil viel ansprechender aussehen, als noch vor einigen Jahren. Das liegt zum einen daran, dass es mit Firefox einen echten Konkurrenten für den Internet Explorer gibt, der in Sachen CSS-Verarbeitung deutliche Vorteile aufweist. Insofern trägt die zunehmende Verbreitung von Firefox, Opera und Artverwandten zur Qualitätssteigerung von barrierefreien Websites bei.

Allerdings fällt auch auf, dass vor allem große Websites die Umstellung auf Barrierefreiheit scheuen und bei anstehenden Relaunches auf Tabellen-Layouts zurückgreifen. Das hat mehrere Gründe:

1. Einsatz von Content Management Systemen
   Hier spielt vor allem die Tatsache eine wichtige Rolle, dass es derzeit kein CMS am Markt gibt, das Barrierefreiheit in hinreichender Form unterstützt. Zumindest nicht für anspruchsvolle Portale.
    
2. Komplexität der Inhalte
   Verschachtelte Strukturen, komplexe Anwendungen und vor allem die anwenderfreundliche Benutzung solcher Inhalte darf in Bezug auf Barrierefreiheit nicht unterschätzt werden.
    
3. Kosten
   Barrierefreiheit spart langfristig Geld, da es Synergieeffekte nutzt und zur Qualitätssicherung beiträgt. Das bedeutet aber auch eine Einstiegs-Investition und die Bereitschaft, laufend in die Qualität zu investieren.

Lassen wir die Kostenfrage einmal außen vor. Bleiben noch das Content Management System und die Komplexität der Inhalte. Beide stehen in unmittelbarem Zusammenhang, denn ein CMS, das barrierefreie Inhalte erzeugen soll, muss auch in der Lage sein, eine barrierefreie Navigation auszugeben. Oder besser noch: mehrere Navigations-Bausteine, um Haupt-, Unter- und Meta-Navigation erzeugen zu können.

Listen: schön, übersichtlich & barrierefrei 

Schön, übersichtlich und barrierefrei - so präsentieren sich mit CSS formatierte HTML-Listen-Elemente, die man für Barrierefreies Webdesign verwendet. Zumindest dann, wenn man sie richtig einsetzt. Hierzu gibt es einen hervorragenden Artikel von Stefan Blanz und Eva Papst bei Einfach für Alle. Besser kann man nicht erklären, wie man es richtig gut macht.

Der Haken an Listen ist, dass sie für kleine und mittlere Websites sehr gut geeignet sind, jedoch mit zunehmender Inhaltstiefe, also auch mit ansteigender Verzweigung in der Sitemap, derzeit nicht in jedem Fall praxistauglich einsetzbar sind. Grund dafür ist zum einen die Skalierbarkeit der Schrift, die in jedem Fall gewährleistet sein muss, die Anzahl der Layout-Spalten und zum anderen die Verschachtelung selbst, die sich nicht ganz einfach mit CSS abbilden lässt - zumindest nicht so, dass die Seiten browserübergreifend dargestellt werden.

Nehmen wir an, wir haben eine Website, mit fünffacher Verzweigungs-Tiefe. In einem Pfad gesprochen, also als Brotkrumen- bzw. Ariadne-Pfad (im Übrigen auch ein sehr gut geeignetes Mittel zur Orientierung innerhalb einer Website), sieht das so aus:

Hauptpunkt > Unterpunkt 1 > Unterpunkt 1.1 > Unterpunkt 1.1.1 > Unterpunkt 1.1.1.1

Natürlich wird es einige Fälle geben, bei denen man eine übersichtliche und barrierefreie Navigation auch unter derartigen Umständen abbilden kann. Häufiger wird es wohl jedoch so sein, dass spätestens ab der dritten Verschachtelung ein (Platz-)Problem auftritt. Große Portale behelfen sich in solchen Fällen gerne mit einer One-Click Navigation. Ähnlich wie beim Navigieren innerhalb von Programmen (zum Beispiel Microsoft Word) wird dann mit Hilfe von Point & Click ein Menüpunkt ausgewählt und die entsprechende Funktion ausgeführt. Leider nutzen fast alle derartigen Menüs aus Gründen der Browser-Kompatibilität JavaScript. Das alleine wäre ja kein Problem, wenn da nicht die Steuerung der Menüs mit Hilfe der Tastatur wäre. Oder das Problem der Fokussierung und deren Kenntlichmachung.

Selbermachen kontra kaufen

Generell kann man barrierefreie Menüs entweder selbst entwickeln oder aber einkaufen. Einfache Strukturen löst man in den meisten Fällen alleine, da dies vielfach schon als Lösung solide vorgedacht, ausprobiert und verbessert wurde. Ein gutes Beispiel hierfür sind die üblichen Verdächtigen von ALA. Hier wird regelmäßig gezeigt, was technisch und optisch machbar ist. Die anschließende Diskussion bringt dann häufig noch weitere Verbesserungen mit sich und wer fleißig liest und arbeitet, lernt schnell und kostengünstig hinzu.

Komplexe Menüs kauft man besser hinzu. Beispielsweise diese One-Click Navigation mit Tastatur-Unterstützung. Natürlich gibt es noch weitere Menüs, die man käuflich erwerben kann - hier ist es der Agentur und dem Budget überlassen, welche Variante gewählt wird. Doch auch beim Kauf von fertigen Navigationen sollte man skeptisch sein und ausgiebig prüfen, ob sich das gewählte Modell für den Einsatz im jeweiligen Projekt eignet. Neben der Kostenfrage spielt hier auch die Integration in bestehende Content Management Systeme und deren Entwicklungsumgebung eine bedeutende Rolle. Und zu guter Letzt natürlich auch die Frage nach der Benutzbarkeit durch alle Besucher einer Seite. Zugänglichkeit für alle.

Aktion Sorgenkind: Integration 

Barrierefreie Menüs in ein bestehendes Content Management System und ein bereits existierendes CSS zu integrieren, stellt sich häufig als schwierige Aufgabe dar. Da ist die Verwendung von HTML-Selektoren, IDs und Klassen, aber auch das Zuweisen von Variablen und die Übergabe von dynamischen Werten durch das Redaktionssystem. Wer dann noch mit mehreren Menüs auf einer Seite hantiert, um Hauptnavigation und Metanavigation voneinander zu trennen, der hat hoffentlich ein gutes Content Management System, mindestens aber dezidierte Erfahrungen im Umgang mit Cascading Stylesheets und den daraus resultierenden Abhängigkeiten. Sonst droht unweigerlich das Chaos.

Barrierefreie Menüs werden mit dem Grad der Dynamisierung einer Website und mit wachsendem Inhaltsvolumen zu einer Herausforderung für die Gestaltung und die Umsetzung einer Internetpräsenz. Beide Punkte gehen Hand in Hand mit einer soliden Planung und bedingen sich auch im weiteren Projektverlauf.

Deshalb ist es besonders wichtig, bereits bei der Planung einer Internetseite auf die richtige Struktur zu achten. Zu viele Navigationspunkte, zu viele inhaltliche Ebenen und / oder redundante Punkte gestalten den Aufbau einer Internetpräsenz zuweilen sehr komplex. Und nur im Team, also in der Kooperation von Gestaltern, Programmierern und Projektmanagern, kann eine barrierefreie und intuitiv benutzbare Navigationsstruktur entstehen und umgesetzt werden.

Alternativen und Fallback-Lösungen

Wenn wir von Problemen bei mehrfach verschachtelten Listen sprechen, dann meinen wir damit natürlich vor allem Portale, die das klassische 3-Spalten-Layout mit Kopf- und Fußzeile nutzen. Dieses Modell hat sich im Internet unter dem Begriff Portal-Stil weitestgehend durchgesetzt und auch in der CSS-Gestaltung zahlreiche Anhänger gefunden. Meist sind die beiden äußeren Spalten als fixe Breiten definiert und die zentrale Spalte wächst, je mehr Pixel ein Bildschirm darstellen kann. Fixe Breiten haben leider die unangenehme Eigenschaft, irgendwann zu klein zu sein, um weitere Unterpunkte oder längere Begriffe aufzunehmen (hier macht sich vor allem ein unangenehmer Bug von Mozilla-Browsern bemerkbar, da diese mit dem verborgenen Trennzeichen − nicht richtig umgehen können - ganz im Gegensatz zum Internet Explorer). In der Regel geschieht das ab einer Tiefe von 2 bis 3 Verschachtelungen. Für kleinere Websites unbedenklich und selbst für die meisten (Stadt)-Portale durchaus zu bewältigen - sieht man einmal von politischen Fehden ab, die bei der Verabschiedung einer Navigationsstruktur regelmäßig auftreten. Aus Usability-Sicht würde den meisten Seiten eine Straffung der Struktur ohnehin gut zu Gesicht stehen und die Zugänglichkeit der Inhalte deutlich verbessern. Hier ist vor allem die Beharrlichkeit und noch mehr die Beratungsleistung der zuständigen Agentur gefragt. Barrierefreiheit ist ein Prozess - auch und gerade in schwierigen Projektphasen.

Sollte man sich nicht auf ein derart einfaches Navigationskonzept einigen können, dann bleibt oft nur die Möglichkeit, mit Fallback-Lösungen zu arbeiten oder Alternativen auszudenken. Eine mögliche Alternative ist die Auflistung von Unternavigationspunkten in der mittleren Spalte, also direkt mit dem Inhalt. So kann man ein bis zwei weitere Ebenen abbilden, wenn man geschickt vorgeht, vielleicht sogar drei. Zusätzlich hilft ein Brotkrumen-Pfad, an dem man sich bis zum Ursprung entlanghangeln kann. Ein Nachteil dieser Variante ist die nicht ganz konsistente Menüstruktur, die zudem klare Abstriche in Punkto Benutzbarkeit hinnehmen muss.

Bleibt noch die Möglichkeit, eine One-Click Navigation anzubieten und diese dann mit einem Fallback auszustatten, dass auch bei abgeschaltetem JavaScript funktioniert. Denkbar wäre auch eine barrierefreie Flash-Navigation mit Fallback-Funktion. Ein solches Fallback könnte beispielsweise eine Navigation auf Listen-Basis (man kommt nicht um das Thema herum) sein, die man am Ende des HTML-Codes integriert und somit die Spalten-Problematik umgeht. Allerdings ein Stück weit auf Kosten der Barrierefreiheit.

Fazit & Ausblick

So lange CSS in den Versionen 2 und 3 noch nicht von allen Browsern verstanden wird, bleibt es bei den hier aufgeführten Varianten für eine barrierefreie Navigation. Lösungsansätze bietet eine umfassende Suche bei einer der führenden Suchmaschinen sicherlich zur Genüge. Und dennoch: Die perfekte Lösung gibt es nicht. Sie entwickelt sich und ist ein Ergebnis, das der Prozess Barrierefreiheit mit sich bringt. Bei allem Streben nach Zugänglichkeit sollte man aber die Benutzbarkeit einer Seite nicht aus dem Auge verlieren. Gerade deshalb sind barrierefreie Navigationsstrukturen eine Königsdisziplin der Barrierefreiheit.