Die Navigation barrierefrei umsetzen – immer geradeaus statt Labyrinth

Waren Sie schon einmal in einem Labyrinth? Sie wissen, es gibt einen Ausgang, das Ziel ist klar. Aber der Weg dorthin ist ein einziges Rätsel. Es gibt Sackgassen wohin man nur schaut. Als Wochenendvergnügen mit den Kindern ein großer Spaß, als Besucher einer Website aber ganz schön anstrengend. Nicht selten hat man bei der Nutzung einer Website aber genau dieses Gefühl: wo bin ich gerade? Wie komme ich zu meinem Ziel? Das kann für alle Nutzenden frustrierend sein. Für Menschen mit Behinderungen ist es eine echte Barriere. Doch es geht auch anders. Und tatsächlich ist es nicht schwer, eine Navigation barrierefrei zu gestalten, wenn man einige Grundregeln beachtet.

Was zählt alles zur Navigation auf einer Website

Navigation auf einer Webseite ist weit mehr als nur das Menü am oberen Rand der Seite. Zur Navigation zählt alles, was Ihre Nutzer verwenden, um sich zu orientieren und Inhalte zu finden. Dazu gehören natürlich die Hauptnavigation, aber auch die Breadcrumbs (Brotkrumenpfade), die Seitensuche, Links am Seitenende und jegliche Form von Buttons oder Links im Hauptbereich, die den Weg durch die Inhalte weisen.

Ziel einer Navigation sind ganz grob 2 verschiedene Nutzergruppen:

• Ich weiß wohin ich will: Nutzer, die schon wissen, was sie suchen, werden Pfade nutzen, die sie schnell zum Ziel bringen. Das kann ein bekannter oder leicht zu findender Link in der übersichtlichen Navigation sein, aber auch die Suche wird oft verwendet, wenn man die richtigen Suchbegriffe schon kennt.
• Ich möchte etwas neues erfahren: Nutzer, die ohne genaues Ziel Ihre Website betreten, werden vermutlich eher stöbern. Sie nutzen oft Verlinkungen innerhalb des Inhalts und hangeln sich von einem Artikel zum Anderen. In einer übersichtlichen Navigation werden aber auch sie fündig und erkennen schnell, worum es auf Ihrer Seite geht. In der Suche arbeiten sie eher allgemein und filtern bei Bedarf später genauer.

Sie sehen, die Anforderungen an eine Navigation sind unterschiedlich. Schauen wir uns deshalb an, wie wir all diese Optionen barrierefrei umsetzen können.

Welche Barrieren kann eine Navigation schon haben?

Menschen ohne nennenswerte Einschränkung können über einige Design- und Entwicklungsfehler Ihrer Navigation sicher hinwegsehen. Nutzer, die auf Assistenztechnologien wie Screenreader oder eine reine Tastaturbedienung angewiesen sind, können das meist nicht. Für sie kann ein kleiner Fehler dafür sorgen, dass Ihre Website insgesamt unbrauchbar wird. Je nach Ziel Ihres Auftritts gehen damit potentielle Kunden verloren. Um so wichtiger ist es, sich zu überlegen, wo eigentlich die Stolpersteine liegen. Hier einige Beispiele:

• Untermenüs können nicht mit der Tastatur aufgeklappt werden, einige Seiten sind so möglicherweise nicht erreichbar.
• Bei Bedienung mit der Maus schließen sich Untermenüs bei ungenauer Bewegung, das frustriert.
• Das Menü wird nicht verstanden oder überfordert den Nutzer.
• Die Nutzer wissen nicht, wo sie sich gerade befinden.
• und viele mehr…

Was steht in WCAG, BITV und EN 301 549 zur Barrierefreiheit von Navigationen?

Grundsätzlich beziehen sich die Standards und Gesetze natürlich auf die gesamte Website. Regeln wie Farbkontraste oder sprechende Linktexte müssen also selbstverständlich auch bei der Gestaltung und Entwicklung der Seitennavigation beachtet werden. Es gibt jedoch einige Aspekte, die sich ganz konkret mit der Navigation der Nutzer befassen. Schauen wir uns drei davon in der deutschen Übersetzung der WCAG 2.1 einmal etwas genauer an.

2.4.1 – Blöcke umgehen

Es gibt einen Mechanismus, um Inhaltsblöcke zu umgehen, die auf verschiedenen Webseiten wiederholt werden.

Jede Website verfügt über Bereiche, die sich auf jeder Inhaltsseite wiederholen, oft ein Seitenkopf mit Logo und Hauptnavigation und ein Seitenfuß mit zusätzlichen Informationen oder Links. Sehende Nutzer „überspringen“ diese Bereiche unbewusst, wenn sie sie nicht brauchen. Mithilfe einer Maus lassen sich schnell beliebige Elemente auf der Seite anklicken.

Nutzer von Screenreadern und/oder der Tastatur als Eingabegerät beginnen mit dem Fokus immer zu Beginn der Seite und müssen Elemente grundsätzlich in der Reihenfolge anspringen, in der sie im Quelltext stehen. Da das sehr zeitaufwendig ist, sollte dem Nutzer die Möglichkeit geboten werden, diese Bereiche zu überspringen. Das gelingt zum Einen durch eine saubere Struktur der Seite durch die geeigneten HTML-Elemente. So kann beispielsweise schnell zur h1 gesprungen werden. Etabliert haben sich aber auch sogenannte Skiplinks oder Sprunglinks. Das sind im HTML versteckte Links, die im Normalfall unsichtbar sind. Erhalten Sie jedoch den Fokus, werden sie (meist oben links in der Ecke) deutlich sichtbar. Diese Links führen dann zu wichtigen Seitenbereichen. Zur Navigation, der Suche, dem Hauptinhalt oder auch zum Footer. Wichtig ist, dass sie die ersten Elemente sind, die auf jeder Seite den Tastaturfokus erhalten.

2.4.5 – mehrere Methoden

Es gibt mehr als eine Methode, um eine Webseite innerhalb eines Satzes von Webseiten zu finden, außer die Webseite ist das Ergebnis oder ein Schritt innerhalb eines Prozesses.

Wie vorhin schon klar wurde haben Nutzer unterschiedliche Ziele beim Betrachten ihrer Seite. Sie haben aber genauso unterschiedliche Fähigkeiten. Deshalb wird in der WCAG vorausgesetzt, dass es immer 2 Wege gibt, die zu einer Seite führen. Das kann bei kleineren Internetseiten ein vollständiges Inhaltsverzeichnis sein, dass am Ende jeder Seite verlinkt wird. Es kann sich aber auch um eine Suche handeln, wenn diese alle Inhalte finden kann.

3.2.3 – Konsistente Navigation

Navigationsmechanismen, die auf mehreren Webseiten innerhalb eines Satzes von Webseiten wiederholt werden, treten jedes Mal, wenn sie wiederholt werden, in der gleichen relativen Reihenfolge auf, außer eine Änderung wird durch den Benutzer ausgelöst.

Das sollte eigentlich selbstverständlich sein, oder? Die Navigation funktioniert immer gleich, befindet sich an derselben Position und sieht auch mehr oder weniger genauso aus. Eine Seitennavigation ist nicht der richtige Ort für Kreativität. Bleiben Sie hier funktional.

Viel häufiger erlebe ich aber, dass Links im Inhaltsbereich, je nachdem wie es hübscher aussieht, mal unterstrichen sind und mal nicht. Setzen Sie auch hier auf Einheitlichkeit. Nicht immer muss es eine Unterstreichung sein um einen Link kenntlich zu machen. Auch kleine Icons oder ein anderer Schriftschnitt können Links vom Fließtext abgrenzen. Bleiben Sie dann aber bei einer gewählten Variante damit Nutzer diese Darstellung lernen können.

Die Sache mit der Tastaturbedienbarkeit

DIE WCAG besagt:

Alle Funktionalitäten des Inhalts sind durch eine Tastaturschnittstelle bedienbar, ohne dass eine bestimmte Zeiteinteilung für einzelne Tastenanschläge erforderlich ist, außer wenn die zugrunde liegende Funktion Eingaben verlangt, die vom Pfad der Bewegung des Benutzers und nicht nur von den Endpunkten abhängig sind.

Einfach zusammengefasst: Alles was ich mit der Maus bedienen kann, muss auch mit der Tastatur gehen, falls es nicht grundsätzlich wichtig ist, wie genau die Maus sich bewegt hat. Das klingt einfacher als gedacht und oft genug ist das reine Erfolgskriterium kein Garant für eine gute Umsetzung. Wer sich an meine Analyse der sächsischen Stadtportale erinnert, der wird noch die Navigation von chemnitz.de im Kopf haben. Das wirklich sehr große Megamenü mit vielen Unterpunkten klappte bei Fokus erfolgreich auf und gab dem Nutzer die Möglichkeit, alle Links zu erreichen. Der Prüfschritt der WCAG ist faktisch erfüllt. Jedoch musste man, um zum letzten Menüpunkt zu gelangen, einige hundert Mal die Tabulator-Taste drücken.

Wenn Sie als Entwickler also die Tastaturbedienung der Navigation umsetzen müssen, dann versuchen Sie auch hier, Abkürzungen einzubauen. Untermenüs, die sich nur auf Interaktion des Nutzers hin öffnen. Probieren Sie es am Besten selbst aus: Sind Sie schon genervt, dann werden es Nutzer mit Screenreadern erst Recht sein.

Die Checkliste – wie gestalte ich eine Navigation barrierefrei

Barrierefreiheit ist keine Checkliste, aber Checklisten können helfen, die vielen Aufgaben im Blick zu haben. Eine barrierefreie Navigation zu erstellen ist darüber hinaus nicht die Aufgabe des Entwicklers, sondern ein Zusammenspiel mehrerer Personen.

Im Konzept

• Klare Struktur der gesamten Website: Sorgen Sie für eine intuitive und einfache Struktur Ihrer Website, dann finden Sich Nutzer schneller zurecht.
• Beschränkung der Menüpunkte: Zu viele Optionen überfordern Nutzer und sorgen dafür, dass die Navigation garnicht verwendet wird. Halten Sie sich an die magische Zahl sieben plus/minus zwei für die Anzahl der Menüpunkte auf jeder Ebene.
• Priorisierung: Wichtige Inhalte sollten leicht erreichbar sein. Verlinken Sie diese an prominenter Stelle doch zusätzlich. So sparen Sie Nutzern den Weg über die Navigation oder Suche. Analysieren Sie dafür genau die Bedürfnisse Ihrer Zielgruppe. Nicht immer decken sich deren Wünsche mit Ihrem Bestseller.
• Breadcrumbs: Diese helfen dabei, den Überblick zu behalten. Planen Sie in großen Websites unbedingt eine ein.
• Suchfunktion: Eine gut sichtbare und funktionierende Suche ist Gold wert. Bei vielen Suchergebnissen sollten diese zusätzlich nach Kundenwunsch gefiltert werden können.
• Konsistenz: Halten Sie die Navigation auf allen Seiten gleich und fügen Sie, wenn möglich, keine neuen Menüs ein

Für Designer

• Vertikale Mausbewegungen: Vertikales Scrollen ist intuitiver und für Nutzer motorisch deutlich einfacher präzise auszuführen. Vermeiden Sie horizontale Bewegungen oder gestalten Sie diese möglichst fehlertolerant. Nötig wird eine solche Bewegung beispielsweise oft beim Öffnen der 3. Menüebene, falls diese sich nur per Mouseover öffnet und schließt.
• Erkennbare Zustände: Sorgen Sie dafür, dass der aktive Menüpunkt klar erkennbar ist. Nutzen Sie hierfür nicht nur Farbe, sondern gern auch Unterstreichungen, Schriftschnitte oder -größen. Nutzer wollen wissen, wo sie sich befinden.
• Große Klickflächen: Diese sind leichter zu treffen als kleine Links. Eine Klickfläche von mindestens 24x24px sollte nicht unterschritten werden.

Für Entwickler

• semantisches HTML: Die Grundlage einer jeden Navigation ist das korrekte semantische HTML. Die Hauptnavigation sollte innerhalb eines <nav>-Elementes liegen. Als Markup für die Einträge selbst haben sich verschachtelte unsortierte Listen als Standard durchgesetzt. Screenreader können diese gut auswerten und Nutzer strukturiert damit arbeiten.
• Tastaturnavigation: Die Navigation muss per Tastatur bedienbar sein. Erfinden Sie dafür aber bitte keine eigenen Shortcuts. Die Tabulatortaste, bei Bedarf Pfeiltasten, Escape, Enter und die Leertaste reichen völlig aus. Im Idealfall öffnen sich Untermenüs nicht bei Fokus, sondern erst auf Wunsch des Nutzers.
• Screenreadertauglichkeit: Verwenden Sie ARIA-Labels und -Rollen, um Elemente für Screenreader zugänglich zu machen. So kann auch für Nutzer von Screenreadern deutlich gemacht werden, ob ein Untermenü gerade geöffnet oder geschlossen ist.

Eine Barrierefreie Navigation auf einer inklusiven Website – Fazit

Schlussendlich sollte eine Website kein Labyrinth sein, durch das man sich mühsam mit einer ‚immer links an der Wand lang‘ Strategie kämpfen muss. Eine Navigation barrierefrei umzusetzen ermöglicht es allen Nutzenden, direkt zum gewünschten Ziel zu kommen. Bieten Sie dabei möglichst viele gleichwertig gute Alternativen, so dass jeder seinen Weg zu Ihren Inhalten finden kann. Im Gegensatz zum Maislabyrinth am Wochenende gibt es eben nicht nur eine richtige Lösung.