Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Skiplinks für alle Browser

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. Viele, auch namhafte Sites zeigen dieses Problem. Zum Beispiel das Aktionsbündnis für barrierefreie Informationstechnik ftb-esv.de/abi.html

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 ledigliche 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.

1 Kommentar

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

    Super. Vielen Dank! Gruss aus der Schweiz

Ihr Kommentar zu diesem Artikel:

Über Ihren Kommentar oder Ihre Frage zu diesem Artikel freue ich mich. Ich behalte mir jedoch vor, Einträge wider die guten Sitten, unsinnige Einträge, oder Spam kommentarlos zu entfernen.