2.8 Skip-Link-Navigation
Skip-Links 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. Skip-Links sollten möglichst an oberster Stelle im Quelltext angeordnet werden, sie 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. Skip-Links sind hierfür ein sehr einfacher und effektiver Weg.
Skiplink-Navigation im YAML-Framework
Die Skiplinks befinden sich möglichst an erster Stelle im Quelltext, direkt hinter dem öffnenden BODY-Tag. In jedem Fall jedoch vor allen weiteren Inhalten. In der Quelltextstruktur von YAML werden standardmäßig zwei Sprungziele definiert: Der erste Skiplink führt an den Inhalten des Containers #header vorbei direkt zur Hauptnavigation. Der zweite Skiplink führt direkt zum Inhaltsbereich der Webseite, in diesem Fall also zu #col3.
Nachfolgend finden Sie den zugehörigen Markup für die Skiplinks. Sie werden als unsortierte Liste mit der ID #skiplinks angelegt. Diese Klasse wird in der base.css definiert und regelt die Darstellung der Liste. Den einzelnen Sprunglinks wird die CSS-Klasse .skip zugewiesen.
<!-- skip link navigation -->
<ul id="skiplinks">
<li><a class="skip" href="#nav">Skip to navigation (Press Enter).</a></li>
<li><a class="skip" href="#col3">Skip to main content (Press Enter).</a></li>
</ul>
Alternativ können Sie die Skiplinks auch direkt in ihr Layout integrieren. Die Formulierung als unsortierte Liste ist optional. Zur Sicherung der Funktionalität ist in jedem Fall die Auszeichnung der Sprunglinks mit der CSS-Klasse .skip erforderlich. Folgendes Codespspiel zeigt die Platzierung der Skiplinks innerhalb der Metanavigation im Container #topnav.
<div id="header">
<div id="topnav">
<a class="skip" href="#nav">Skip to navigation (Press Enter).</a>
<a class="skip" href="#col3">Skip to content (Press Enter).</a>
...
</div>
...
</div>
Als Sprungziele dienen in beiden Beispielen vorhanden ID's innerhalb des Layouts. Sie können jede beliebige ID als Sprungziel im href Attribut Ihrer Skip-Links angeben. Alternativ - jedoch heutzutage nicht mehr üblich - können Sie auch benannte Anker als Sprungziele festegen. In diesem Fall müssen Sie dem betreffende Sprunganker aus Kompatibilitätsgründen identische Werte für die Attribute id und name zuweisen (z.B. <a id="content" name="content">).
Unsichtbar und Barrierefrei
Nutzer ohne Behinderung, die sich mit einem Standardbrowser durch das Internet bewegen, benötigen diese Navigationshilfe in der Regel nicht. Aus diesem Grund werden die Skiplinks in der normalen Bildschirmansicht und auch im Ausdruck verborgen.
Sie dürfen jedoch nicht durch die CSS-Eigenschaft display:none; ausgeblendet werden. Diese Eingeschaft wird von Screenreadern interpretiert und verhindert das Vorlesen. Die Skip-Links würden somit unbrauchbar werden. Weiterhin müssen Skiplinks bei Focussierung durch Tastatursteuerung des Browsers sichtbar werden, um ein visuelles Feedback für den Nutzer zu erzeugen.
Die hierfür erforderlichen CSS-Definitionen sind in der CSS-Datei base.css (siehe Abschnitt 3.3: Das Basis-Stylesheet) verankert und stehen somit über die ID #skliplinks (unsichtbare Liste) und .skip (Sprunganker) immer zur Verfügung.
/**
* @section hidden elements | Versteckte Elemente
* @see www.yaml.de/en/documentation/basics/skip-links.html
*
* (de) Skip-Links und versteckte Inhalte
*/
/* (de) Klassen für unsichtbare Elemente im Basislayout */
.skip, .hideme, .print {
position: absolute;
top: -32768px;
left: -32768px; /* LTR */
}
/* (de) Skip-Links für Tab-Navigation sichtbar schalten */
.skip:focus,
.skip:active {
position: static;
top: 0;
left: 0;
}
/* skiplinks: technical setup */
#skiplinks {
position: absolute;
top: 0px;
left: -32768px;
z-index: 1000;
width:100%;
margin: 0;
padding: 0;
list-style-type: none;
}
#skiplinks a.skip:focus,
#skiplinks a.skip:active {
left: 32768px;
outline: 0 none;
position: absolute;
width:100%;
}
Soweit die allgemeinengültigen Regeln. Die abschließende visuelle Gestaltung erfolgt durch den Webdesigner. Die beigefügten Layoutbeispiele enthalten ihre visuelle Gestaltung über die Regeln in der basemod.css.
/**
* Skiplinks
*
* (en) Visual styling for skiplink navigation
* (de) Visuelle Gestaltung der Skiplink-Navigation
*
* @section content-skiplinks
*/
#skiplinks a.skip:focus,
#skiplinks a.skip:active {
color:#fff;
background:#333;
border-bottom:1px #000 solid;
padding:10px 0;
text-decoration:none;
}
Weiterführende Literatur: 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.
Focus-Probleme korrigeren
Obwohl es keinerlei Probleme mit der visuellen Darstellung der Skiplinks gibt, ist speziell für den Internet Explorer 8 unter Windows 7 und für Browser die auf der Webkit-Engine basieren (z.B. Safari, Google Chrome) ein Bugfix notwendig. In diesen Browsern werden die Ziele der Skiplinks zwar angesprungen (das Ziel wird in den sichtbaren Bereich des Viewport verschoben), der Tabfocus verbleibt jedoch beim Sprunganker und wird nicht auf das Ziel gesetzt. Beim nächsten Tab-Schritt springt der Focus somit wieder zurück an den Anfang des Dokumentes, zu dem Anker/Element, welches auf den verwendeten Skiplink folgt.
YAML stellt zur Behebung dieses Fehlverhaltens ein Script zur Verfügung, welches selbstständig alle im Dokument vorhanden Skiplinks findet, die Ziele analysiert und beim Sprung den Focus auf das jeweilige Sprungziel setzt.
Die JavaScript Datei yaml-focusfix.js befindet sich im Verzeichnis /yaml/core/js/
<!-- full skip link functionality in ie8 & webkit browsers -->
<script src="./yaml/core/js/yaml-focusfix.js" type="text/javascript"></script>
</body>
Zur Vorbeugung gegen mögliche Performanceprobleme bei vielbesuchten Webseiten wird das Script in den mitgelieferten Layoutbeispielen, wie auch in der Datei markup_draft.html am Ende des Quelltextes, direkt vor dem schließenden BODY Tag eingebunden.
