2.8 Skiplink-Navigation
Skiplinks verbessern in erster Linie die Nutzungsqualität einer Webseite für Internet-Nutzer, die auf die Hilfe von Screenreadern angewiesen sind. Screenreader linearisieren den Inhalt der Webseite und lesen ihn der Reihe nach vor. Skiplinks werden möglichst an oberster Stelle im Quelltext angeordnet und stellen Sprungmarken zu den wichtigsten Bereichen innerhalb der Webseite (Navigation, Inhalt, usw.) bereit.
Zum Teil ergibt sich daraus die Diskussion, den Inhalt einer Webseite möglichst weit oben im Quelltext anzuordnen und Navigationselemente im Quelltext nach unten zu schieben. Auf diese Weise gelangt der Nutzer direkt zum Inhalt, ohne sich auf jeder Seite erst die Navigationselemente vorlesen lassen zu müssen.
Doch was, wenn der Nutzer den Inhalt gar nicht lesen will? Während er noch nach den richtigen Informationen sucht, wäre es sogar störend, wenn erst nach dem gesamten Seiteninhalt die Navigationselemente für das Erreichen des nächsten Untermenüpunktes folgen. Es gibt daher keine festgeschriebene optimale Platzierung der Inhalte im Quelltext. Vielmehr benötigen wir ein Hilfsmittel, um dem Nutzer die Möglichkeit zu geben, schnell zu allen wichtigen Bereichen der Webseite zu gelangen. Skiplinks sind hierfür ein sehr einfacher und effektiver Weg.
Skiplink-Navigation im YAML-Framework
Im XHTML-Quelltext von YAML befinden sich die Skiplinks im DIV-Containter #topnav, noch vor dem Impressums-Link. Der erste Link #navigation führt an evtl. im Header vorhandenen Texten vorbei direkt zur Hauptnavigation. Der zweite Skiplink #content zeigt auf den Beginn des eigentlichen Seiteninhalts.
...
<div id="header">
<div id="topnav">
<a class="skip" href="#navigation" title="Direkt
zur Navigation springen">Zur Navigation springen</a>
<a class="skip" href="#content" title="Direkt
zum Inhalt springen">Zum Inhalt springen</a>
</div>
...
</div>
...
<div id="nav">
<a id="navigation" name="navigation" />
...
</div>
...
<div id="col2">
<div id="col2_content" class="clearfix">
<a id="content" name="content" />
...
</div>
</div>
Die Sprungmarke für #content muss je nach Nutzung der einzelnen Spalten durch den Webdesigner platziert werden. In dem hier abgedruckten Beispielquelltext beginnt der Seiteninhalt in der Spalte #col2. Die erste Spalte #col1 enthält in diesem Beispiel eine zweite Navigationsebene und wird daher übersprungen. Exakt diesen Aufbau der Skiplink-Navigation finden sie auf allen Seiten der YAML-Dokumentation mit zweispaltigem Inhaltsbereich.
Unsichtbar und Barrierefrei
Nutzerinnen und Nutzer ohne Behinderung, die sich mit einem Standardbrowser durch das Internet bewegen, benötigen diese Navigationshilfe in der Regel nicht. Daher werden die Skiplinks in der normalen Bildschirmansicht und auch im Ausdruck verborgen. Die CSS-Klasse .skip wird in der CSS-Datei base.css (siehe Abschnitt 3.3: Das Basis-Stylesheet) definiert:
/* ###############################################
** ### Skiplink-Navigation #######################
** ###############################################
*/
@media screen, print
{
a.skip {
position: absolute;
left: -1000em;
width: 20em;
}
}
Damit sind die Skiplinks am Bildschirm und im Ausdruck unsichtbar. Die Eigenschaft display:none; wäre hier problematisch, da viele Screenreader dadurch die Links nicht anzeigen. Eine sehr gute Übersicht zu möglichen Darstellungsmethoden von Skiplinks enthält der Artikel "Skip Navigation" von Jim Thatcher.
Diese Art der Navigationshilfe kann selbstverständlich durch zusätzliche Sprungmarken erweitert werden. Dies liegt im Ermessen des Webdesigners und sollte wohlüberlegt und zurückhaltend geschehen.
