Manuel-Bieh.de – Web-Development & Consulting

Viele Seiten, vor allem die mit viel Inhalt, setzen mittlerweile auf „Skiplinks“ (Sprungmarken) für Textbrowser und Screenreader. Also Links, welche für den Otto-Normal User nicht sichtbar sind, einem Textbrowser- oder Screenreader-User jedoch die Navigation durch die Seite erleichtern (können). Ein Skiplink kann beispielsweise dafür sorgen, dass der User direkt zum eigentlichen Inhalt der Seite klicken kann, ohne sich zum x-ten Mal die Navigation vorlesen lassen zu müssen.

Den Möglichkeiten sind bei der Erstellung dieser Sprungmarken keine Grenzen gesetzt. Es gibt die Möglichkeit den Link mit einem absurd hohen negativen Text-Einzug oder Margin zu versehen, display:none oder eine negative Positionierung zu verwenden. Er sollte jedoch immer am Anfang eines Dokumentes erscheinen, da es wenig Sinn machen würde, würde er sich mitten im Dokument verstecken.

Diese Skiplinks müssen aber für Benutzer einiger grafischer Browser nicht im Verborgenen bleiben. Die Stars der Stunde sind in diesem Fall das <abbr title=“Hypertext Markup Language“>HTML</abbr>-Attribut tabindex, sowie das <abbr title=“Cascading Stylesheets“>CSS</abbr> Pseudo-Element :focus. Da der Internet Explorer :focus wie so vieles nicht unterstützt, bleibt dieser leider wieder einmal außen vor.

Ein Beispiel wie diese Methode aussehen kann, findet man hier auf der Seite, indem man mehrmals die Tab-Taste drückt, und auf die linke obere Ecke des Browserfensters schaut.

Der Code in meinem Beispiel sieht im HTML wie folgt aus:

und im CSS:

.skiplink a {
    background: white;
    font-size: 1.3em;
    left: 0; 
    position: absolute; 
    top: -100px; 
    padding: 0 5px; 
    z-index: 100;
}
.skiplink a:focus {
    top: 0px;
}

Zur Erklärung:
Durch das Attribut tabindex legen wir fest, in welcher Reihenfolge ein Browser die auf der Seite vorkommenden Links anspringen soll. Durch tabindex="1" und tabindex="2" sagen wir dem Browser also, das er erst den Link „Zur Navigation springen“, anschließend „Zum Content springen“ anwählen soll. Diese Links sind jedoch dank CSS so formatiert, dass sie an einer Position 100px über dem sichtbaren Bereich (Viewport) angezeigt werden. Nutzen wir nun die Tab-Taste zum Navigieren, so springt der Fokus auf den ersten tabindex-Link „Zur Navigation springen“. Der Link ist also fokussiert, und das Pseudo-Element :focus greift. Durch .skiplink a:focus {top: 0;} holen wir den entsprechenden Link wieder auf den Boden der Tatsachen, bzw vielmehr in den Viewport zurück, und sehen jetzt an der von uns festgelegten Position, den ansonsten unsichtbaren Skiplink.

Durch diese Technik lassen sich natürlich nicht nur Skiplinks zu Bereichen der Seite, sondern auch komplette Seiten-Navigationen zugänglich machen. Inwiefern das jedoch Sinn macht, ist die andere Frage. Dieses Beispiel funktionierte in meinen Tests übrigens in Mozilla-Browsern, und Teilweise in der Opera8 Beta, welche jedoch Probleme hatte den Link nach dem Fokussieren wieder aus dem Viewport zu schieben.

Links zum Thema:

• http://www.css4you.de/focus.html
• http://de.selfhtml.org/html/formulare/tastatur.htm#tabreihenfolge
• http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classes