Sie sind hier: Startseite · Artikel · Skiplinks

Skiplinks für alle Browser

Hinweis:
Dieser Artikel ist älter als 18 Monate / wurde seit 18 Monaten nicht aktualisiert. Dies kann (muss aber nicht) dazu führen, dass der Artikel, und / oder darin beschriebene Techniken, nicht mehr aktuell sind. Bitte berücksichtigen Sie diesen Hinweis bei der Lektüre.

Skiplinks (englisch: to skip, deutsch: überspringen) sind Links, die es ermöglichen, größere Bereiche einer Webseite zu überspringen, zum Beispiel die Navigation. Skiplinks unterstützen Nutzer, die nur mit der Tastatur arbeiten, zum Beispiel blinde Menschen, oder Nutzer mit motorischen Einschränkungen.

Skiplinks wurden von Browsern leider noch nie ordentlich unterstützt. Ich hatte daher seit Jahren verschiedene, mehr oder weniger komplizierte Lösungen im Einsatz, damit der Skiplink in allen Browsern funktioniert. Das Sorgenkind war dabei — neben alten IEs — von jeher der Safari mit der Webkit-Browser-Engine. Inzwischen verwenden aber auch Google Chrome und Opera eine Engine (Blink), die auf Webkit basiert. Auch diese Browser haben daher jetzt das Problem, dass seiteninterne Sprünge zu Ankern zwar ausgeführt werden, der Tastaturfokus aber nicht zum Anker geführt wird. Der Sprung funktioniert nicht.

Nun gut, den Safari konnte man noch irgendwie ignorieren? Aber mit Chrome, dem derzeit weltweit am meisten eingesetzten Browser, geht das nun wirklich nicht.

Also weiter gebastelt: Meine Lösung aus 2008 hatte ich ja zwischenzeitlich mehrmals überarbeitet. Zuletzt mit einem jQuery Script von terrillthompson.com

Mehr oder weniger zufällig habe ich jetzt bemerkt, dass es anscheinend auch ganz ohne Javascript geht. Und zwar ganz einfach: Mit tabindex="-1" im Sprungziel.

Der ganze Code jetzt:

1. Der Skiplink: <a class="skiplink" href="#inhalt">Sprung zum Inhalt</a>

Die Klasse "skiplink" dient lediglich dazu, den Skiplink für Mausbenutzer unsichtbar zu machen, für Tastaturnutzer, also die Zielgruppe, aber einzublenden. Siehe ältere Lösungen unter "Skiplinks können auch irritierend sein".

2. Das Sprungziel: <div id="inhalt" tabindex="-1">

Mit tabindex="-1" kann ein beliebiges Element einer Seite fokussiert werden, ohne dass es in die Tab-Reihenfolge aufgenommen wird. Wenn also anhand der Tab-Reihenfolge durch die Seite navigiert wird, werden nur Links und Steuerelemente sowie Elemente mit einem tabindex-Wert von 0 und höher angesprungen.

Hat die Bastlerei mit dem Skiplink ein glückliches Ende gefunden? Über Kommentare würde ich mich freuen. Insbesondere auch von Screen Reader Nutzern.

Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.

1. Barbara schrieb am Mittwoch, 17.02.16 11:18 Uhr:

   Super. Vielen Dank! Gruss aus der Schweiz