Kategorien
Allgemein

Skip-Links

Wer schon mal mit einem Textbrowser, Browser ohne Stylesheet-Unterstützung oder mit leeren Mausakkus unterwegs war, wird sie sicherlich nötig gehabt haben: Skip-Links.

Skip-Links finden sich meist am Anfang eines XHTML-Dokuments und lassen den User die Hauptnavigation, den Inhalt oder irgendwas anderes überspringen. Möglich macht dies eine Aufteilung des Dokuments in verschiedene Bereich, kenntlich gemacht durch IDs.

Ein Beispiel-Dokument (Ausschnitt):

<body>
<ul id="skip">
<li><a href="#content">Navigation überspringen</a></li>
<li><a href="#sidebar">Inhalt überspringen</a></li>
</ul>
<ul id="nav">
<li><a href="#">Startseite</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Über uns</a></li>
<li><a href="#">Spiel und Spaß</a></li>
</ul><br />
<div id="content">
<h1>Willkommen!</h1>
<p>Lorem ipsum dolar sit amet &hellip;</p>
</div><br />
<div id="sidebar">
</div>

Wie man im Beispiel sieht, taucht zuerst eine Liste mit Sprunglinks (<ul id="skip">) auf. Auch sie hat eine ID bekommen, damit sie später mit CSS formatiert werden kann. Die Links in dieser Liste zeigen jeweils auf die Bereiche #content und #sidebar weiter unten im Quelltext. Klickt (oder tabbt und entert) der Besucher nun auf diesen Link, springt der Browser automatisch zur passenden Stelle. So kann man in Windeseile Navigationsmenüs oder Inhaltsblöcke überspringen.

Passenderweise sollte man vielleicht noch Skip-Links nach jedem Hauptblock anlegen, die einen wieder zurückspringen lassen:

<div id="content">
<h1>Willkommen!</h1>
<p>Lorem ipsum dolar sit amet &hellip;</p>
<div><a href="#ttnav">Zur Navigation</a></div>
</div>

Man sollte es mit den Skip-Links allerdings nicht übertreiben. Es reicht vollkommen, die 3-4 Hauptbereiche eines Dokuments zu verlinken. Vielmehr kann man in den title-Attributen der Skip-Links angeben, was in diesem Bereich vertreten ist, was sich besonders für den Link zur ›Sidebar‹ eignet, da hier viele Unterbereiche zusammenkommen.

Als Inspiration zu diesem Artikel diente der Artikel Mit »Links« im Netz von Jeena Paradies.