Überblick
Der Hauptinhalt ist in der Regel nicht das erste, was auf einer Webseite steht. Tastatur- und Screenreader-Benutzer müssen meistens eine lange Liste von Navigations-Links, Unterlisten von Links, Unternehmensicons, Webseiten-Suchen und anderen Elementen durchsuchen, bevor sie überhaupt am Hauptinhalt ankommen. Dies ist für Anwender mit diversen Formen von motorischer Behinderung besonders schwierig.
Ohne ein System zur Umgehung von langen Link-Listen haben einige Benutzer einen riesigen Nachteil. Betrachten wir Anwender, die ihre Arme nicht bewegen können und den Computer benutzen, indem sie mit ihren Köpfen auf einen Switch tippen, oder einen Stick in ihrem Mund benutzen, um Keyboard-Tasten zu drücken. Zu erwarten, dass Anwender einen Vorgang mehrere hundert Male durchführen, bevor sie den Hauptinhalt erreichen, ist einfach nicht akzeptabel.
Natürlich haben die Menschen, die sehen und ihre Maus benutzen können, keine Probleme mit solchen Seiten. Sie können sofort die gesamte Seite betrachten und identifizieren, wo sich der Hauptinhalt befindet. In der Tat haben sehende Anwender einen eingebauten „Navigation überspringen“-Mechanismus: ihre Augen. Sie können die vielen Links vor dem Hauptinhalt überspringen und direkt mit der Maus auf den Link klicken, den sie sehen wollen. Die „Navigation überspringen“-Idee wurde entwickelt, um den Screenreader- und Tastatur-Benutzern auch die Fähigkeit zu geben, direkt zu dem Hauptinhalt zu gelangen, die sehende Mausbenutzer für selbstverständlich halten.
„Navigation überspringen“-Links erstellen
Die Idee ist einfach genug: ein Link am oberen Rand der Seite, der den Anwender runter zu einem Anker, oder zum Ziel am Anfang des Hauptinhaltes bringt. Meistens ist das wirklich so einfach, allerdings gibt es mehr als einen Weg, um das Ziel zu erreichen. Einige Techniken sind besser als andere. Die hier beschriebenen Techniken sind:
- Sichtbare Links oben auf der Seite bereitstellen
- Sichtbare Links an anderer Stelle auf der Seite bereitstellen
- Den Link unsichtbar machen
- Den Link so lange unsichtbar machen, bis er den Tastaturfokus erhält
Sichtbare Links oben auf der Seite bereitstellen
Die einfachste Methode um einen „Navigation überspringen“-Link zu erstellen, ist es, ihn als normalen Text an den oberen Rand der Seite zu platzieren. Legen Sie den dazugehörigen Anker (Ziel des Links) an den Anfang des Hauptinhaltes.
Die horizontale Lage des Links ist nicht sehr wichtig. Der Link kann auf der linken Seite, in der Mitte, rechts, oder in einer Lage dazwischen sein. Der Schlüssel ist, sicherzustellen, dass der Link einer der ersten Elemente ist, den Screenreader-Benutzer hören und den Tastaturbenutzer erreichen. Andernfalls könnten die Benutzer nicht erkennen, dass es einen „Navigation überspringen“-Link überhaupt gibt und würden ihre Zeit damit verschwenden, sich durch das Durcheinander der fremden Links zu suchen. Nutzer von Bildschirmlesegeräten können besonders ungeduldig werden, wenn sie den „Navigation überspringen“-Link nicht sehr früh auf der Seite hören.
Um optimal verwendbar zu sein, muss der Link auch visuell offensichtlich sein. Ein sehr kleiner oder versteckter Link nutzt den Benutzern nicht, die die „Skip“-Links am meisten benötigen – den sehenden Tastaturnutzern.
Fazit: Diese Methode funktioniert und ist in höchstem Maße barrierefrei. Ein Nachteil dieses Ansatzes ist, dass der Link sehr aufdringlich zu designen ist – er muss sichtbar und ganz am Anfang der Seite sein. Außerdem wird der Link allen Benutzern angezeigt, auch den sehenden Mausbenutzern, welche den Link nicht verwenden können, oder möglicherweise von ihm verwirrt werden können.
Beispiel
Der Link ist das erste Element auf der Seite. Der Anker oder das Ziel des Links (wo der Link den Benutzer hinführt) ist am Anfange des Hauptinhaltes platziert.
<body><a href=“#maincontent“>Zum Hauptinhalt springen</a>…
<main id=“maincontent><h1>
Überschrift</h1><p>
Dies ist der erste Paragraf</p>
Das Ziel wird durch seinen, zu dem id-Attributwert passenden, href-Wert (minus dem „#“) des „Skip“-Links identifiziert.
Alternativ können Sie einen benannten Anker verwenden um das Ziel des Links zu identifizieren, obwohl benannte Anker nicht länger konform sind in HTML5.
<h1><a name="maincontent" id="maincontent"></a> Überschrift</h1><p>Dies ist der erste Paragraf</p>
Unsichtbare Links
Viele Entwickler machen sich Sorgen über die ästhetische Wirkung von „Navigation überspringen“-Links. Sie denken, dass diese Links nicht besonders attraktiv aussehen, dass sie das Layout „ruinieren“, oder, dass sie einen künstlerischen Ausdruck bekommen. Es ist einfach zu behaupten, dass die Links Benutzer verwirren können, die diese nicht benötigen. Während ein sichtbarer „Skip“-Link eine Art von einem deutlichen Engagement zur Barrierefreiheit darstellt, kann der Link visuell ausgeblendet werden.
Es gibt ein paar Methoden, dies zu tun, aber es ist unerlässlich, dass der Link weiterhin von allen Tastaturbenutzern, insbesondere von sehenden Tastaturbenutzern, verwendet werden kann. Dies bedeutet, dass der Link standardmäßig ausgeblendet werden sollte, aber dass er sichtbar wird, wenn er den Tastaturfokus erhält. Einige Techniken, wie den Inhalt permanent mit CSS zu verstecken, dem Link dieselbe Farbe wie dem Hintergrund zu geben, den Link auf 0 Pixel zu dimensionieren, oder ihn auf ein transparentes, einen Pixel großes Bild zu legen, erfüllen diese wichtigen Anforderungen nicht.
Wahrscheinlich ist die am meisten barrierefreie Methode um „Skip“-Links visuell zu verstecken, diese außerhalb des Bildschirmes zu verstecken und dafür zu sorgen, dass sie auf dem Bildschirm positioniert werden, wenn sie den Tastaturfokus erhalten.
Ein mögliches Problem bei diesem Ansatz ist, dass wenn der Benutzer sehr schnell mit der Tab-Taste navigiert, wird der Link nur für den Bruchteil einer Sekunde auf der Seite sichtbar und kann übersehen werden. Dies kann teilweise angegangen werden, durch die Gewährleistung, dass der „Skip“-Link auffällig sichtbar oben auf der Seite steht. Zusätzlich kann man Scripting von (optimaler Weise) CSS3-Übergängen verwenden, um den Link so zu animieren, dass er für einen bestimmten Zeitraum auf dem Bildschirm sichtbar bleibt.
Hinweis
Sie können ein Beispiel von einem versteckten „Skip“-Link sehen, der bei Tastaturfokus sichtbar wird und eine CSS3 Animation hat, damit dieser auffällig sichtbar ist und für einen Moment auf dieser Seite auf dem Bildschirm angezeigt wird. Navigieren Sie einfach mit der Tab-Taste durch die Links am Anfang dieser Seite und achten Sie auf den „Skip“-Link in der linken oberen Ecke des Bildschirms.
Fazit: Diese Methode eignet sich gut für fast alle Nutzer. Sehende Mausbenutzer (die von dem Link keinen Nutzen haben), sehen diesen nicht, Screenreader-Nutzer hören den Link und sehende Tastaturbenutzer können den Link sehen, wenn Sie dorthin navigieren.
Welche Formulierung ist am besten?
Es gibt mehr als einen „besten“ Weg, um den Link zu benennen. Hier sind einige ziemlich häufige Beispiele:
- Navigation überspringen
- Hauptnavigation überspringen
- Navigations-Links überspringen
- Zum Hauptinhalt springen
- Zum Inhalt springen
Keine von diesen ist inhärent besser als die anderen. Allgemein bevorzugen wir „Zum Hauptinhalt springen“, da es erklärt, wohin sie navigieren gegenüber zu was sie überspringen. Geringfügige Abweichungen hierzu sind wahrscheinlich akzeptabel, wie „Top-Navigation überspringen“. Werden Sie hier nicht zu kreativ, sonst könnten Benutzer nicht erkennen, was der Zweck des Links ist.
Marotten eines Browsers
„Navigation überspringen“-Links haben so ein einfaches Konzept, dass es schwer zu glauben ist, dass es bei der Umsetzung Marotten des Browsers gibt, aber es gibt welche. Einige Browser unterstützen In-Page-Links nicht vollständig. Während sie visuell den Fokus auf die Lage des Ziels oder des benannten Ankers für den „Skip“-Link setzen, wird der Tastaturfokus nicht tatsächlich auf diese Position gesetzt. Diese Fehler können möglicherweise mithilfe von JavaScript behoben werden, indem der Fokus (mit Hilfe von JavaScript focus()) auf das Zielelement gesetzt wird.
Mehrere „Skip“-Links
Was ist, wenn eine Seite mehrere Abschnitte und/oder mehrere Schichten von Navigations-Links hat? Sollten Entwickler einen „Navigation überspringen“-Link für jeden dieser Abschnitte, oder für jede Schicht der Navigations-Links erstellen? In den meisten Fällen ist dies nicht notwendig. Denken Sie daran, der Zweck von „Navigation überspringen“-Links ist, die Unordnung der Linklisten zu reduzieren. Mehr Links hinzuzufügen erhöht die Unordnung der Links.
Eine bekannte US-Regierung hatte kürzlich eine Website mit insgesamt neun verschiedenen „Navigation überspringen“-Links (die Links sind mit CSS versteckt)
- Zum Inhalt springen
- Zur Regierungs-Suche springen
- Zur unteren Navigation springen
- Zur oberen, rechts ausgerichteten Navigationsleiste springen
- Zu Organisation springen
- Zu Regierung kontaktieren springen
- Zum Referenzzentrum springen
- Zu Informationen nach Themen springen
- Zu Bürger: online erledigen! Springen
Hier stellt sich die Frage, ob sie nicht einen „Skip-Links überspringen“-Link benötigen! Durch die Bereitstellung einer richtigen Dokumentgliederung, vielleicht mit der Benutzung von HTML5 Abschnittselementen und ARIA Landmarks und einer Vereinfachung der Seitenstruktur und Navigation, genügen in der Regel ein oder zwei „Skip“-Links.
„Skip“-Links oder andere In-Page-Links können auch verwendet werden, um es Benutzern zu ermöglichen, zu bestimmten Inhalten, oder über Inhalte hinweg zu springen. Das Inhaltsverzeichnis zu Beginn der Seite beinhaltet beispielsweise In-Page-Links, um die Navigation zu Seitenbereichen zu erleichtern. Ein „Skip“-Link kann auch verwendet werden, um es dem Benutzer zu erlauben, verwirrende oder möglicherweise unzugängliche Inhalte, wie ASCII-Kunst, komplexe Tabellen, etc., zu überspringen.
Alternativen zu „Navigation überspringen“-Links
Die Wahrheit ist, dass „Navigation überspringen“-Links eine ziemlich plumpe und aufdringliche Lösung zu einem echten Weltproblem sind. Sie funktionieren. Sie sind nützlich, aber sie sind ein Bisschen wie ein Hack. Sie werden weiterhin nützlich sein, bis ein mehr standardisiertes Verfahren zur Bestimmung der Differenz zwischen Navigation und Hauptinhalt entwickelt ist und vollständig unterstützt wird. Mit ARIA Landmarks und den HTML5-Elementen, ist man näher an der Realität. Leider unterstützt noch kein Browser die Tastaturnavigation über diese Elemente vollständig. Trotz dieser Einschränkungen, gibt es andere Möglichkeiten, wie man die Seitennavigation zusätzlich zu „Skip“-Links erleichtern kann.
Navigation nach Überschriften
Die nützlichste Alternative ist, die Dokumente mit passenden Überschriften zu erstellen, so dass die Benutzer von Überschrift zu Überschrift springen können. Die meisten Bildschirmlesegeräte erlauben es dem Benutzer, sich eine Liste von Überschriften, oder die einzelnen Überschriften eines Abschnitts anzuhören, sowie Absätze, Bilder, Links und andere Fremdinformationen zu überspringen. Wenn Dokumente ordnungsgemäß erstellt werden, können sie oft eine Gliederung von Überschriften bilden, welche nicht nur die Möglichkeit bietet, die Navigation zu überspringen, sondern lässt die Benutzer von Bildschirmlesegeräten die Hauptinhalte eines Dokuments überfliegen, ohne den ganzen Text gelesen zu haben. Die Überschrift des Primärdokuments am Anfang des Hauptinhaltes definiert mit
<h1>, kann einen sehr schnellen Zugang zu Beginn des Hauptinhaltes liefern.
Der einzige Nachteil bei diesem Ansatz ist, dass nur Screenreader-Benutzer Zugriff zu dieser Funktion haben. Browser unterstützen diese Funktion nicht. Das bedeutet, dass sehende Tastaturbenutzer nicht so von Link zu Link springen können, wie es die Screenreader-Benutzer können.
Fazit: Diese Methode ist sehr effektiv für die Benutzer von Bildschirmlesegeräten, aber sehende Tastaturnutzer haben in der Regel keinen Vorteil davon. Da es aber viele Gründe gibt, Überschriften zu verwenden, ist diese Methode sehr zu empfehlen.
Alternative Lesereihenfolgen
Einige Entwickler legen den Hauptinhalt zu Beginn der Lesereihenfolge und die Navigation ans Ende – in der Regel mit Hilfe von CSS, damit die Navigation als erstes auf der Seite sichtbar bleibt. Diese Methode macht „Navigation überspringen“-Links unnötig, aber es bringt eine andere Frage hervor. Sollten solche Seiten „Springe zur Navigation“-Links bieten? Dies ist eine schwierige Frage. Links die Nutzer zur Navigation führen sind unerwartet und können zu Verwirrung führen. Mit oder ohne „Navigation überspringen“-Links können Screenreader-Benutzer, die auf die Navigation zugreifen wollen, auf der Seite verloren gehen und sich fragen, ob es überhaupt eine Navigation gibt.
Dieser Ansatz führt zu einer sehr untypischen Navigation und Lesereihenfolge – und das kann sehr verwirrend sein, besonders für sehende Nutzer, die den Navigationsfokus verfolgen, der scheinbar auf der Seite umherspringt, anstatt am Anfang startet.
Fazit: Das Konzept kann nützlich sein, aber die Benutzer können mit einer untypischen Lese- und Navigationsreihenfolge verwirrt werden.