Archiv:

Latest photoblog

photoblog

Blog » Skiplinks als Seitenelement

Skiplinks als Seitenelement

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:

6 Kommentare zu “Skiplinks als Seitenelement”

  1. Grafik: GravatarMathias:

    Danke für Deinen Hinweis auf meiner Seite und wie ich sehe, bist Du auch von diesem Kopierer heimgesucht worden:

    http://www.designs4web.ch/wordpress/?p=84

    Hast Du bereits etwas unternommen, oder wollen wir gemeinsam vorgehen?

  2. Grafik: Gravatarmanuel:

    Evtl können wir ja ne Sammelklage starten und ihn ruinieren ;)

    Ich hab ihm jetzt erstmal ne Frist bis gestern Abend gesetzt den Beitrag zu entfernen. Das hat er wies aussieht nicht gemacht. Mal schauen ob sich noch wer meldet. Hatte gestern noch 2 Leute ausfindig machen können die auch beklaut wurden.

  3. Grafik: GravatarUdo:

    Ein kleiner Nachtrag: Der Internet Explorer ersetzt in seiner – oft eigenwilligen – Markupinterpretation das Pseudo-Element :focus mit :active. Das kann man sich hier zunutze machen: Ergänzt man in obigem Beispiel schlicht noch die :active-Definition, dann kehren auch beim Marktführer die ausgeblendeten Skiplinks auf den Bildschirm zurück:

    .skiplink a:focus, .skiplink a:active {top: 0px;}

  4. Grafik: GravatarLittle Boxes - Weblog - » Ergänzung zu Seite 55: “Den Skip-Link ausblenden”:

    […] Skiplinks für die Welt von Manuel Bieh […]

  5. Grafik: GravatarMatthias:

    Das bringt aber auch nichtwirklich viel, denn diese Skiplinks sind ja in erster Linie für die Tastaturnavigation gedacht. Wenn man diese im IE allerdings anwendet (einbelnden kann man sie ja) dann funktioniert zwar die Sprungmarke, jedoch springt der focus automatisch auf den ausgangspunkt zurück, sobald man die tabtaste erneut drückt. machtwenig sinn.

  6. Grafik: GravatarRaus aus der ruhigen Ecke! - Seite 3 - XHTMLforum:

    […] Zitat von Dieter Krautkraemer einen Skiplink ber die Navi setzen, Hallo, dass kannte ich noch gar nicht. Bei Manuel Bieh xhtml, css, webdesign Skiplinks fuer die Welt! habe ich ein paar Infos gefunden; grundstzlich verstndlich was gemeint ist, aber um es umzusetzen werde ich wohl noch ne Weile brauchen… (Ich sollte nicht so oft hier lesen… zieht nur Arbeit nach sich! ) […]

Die Trackback-URL lautet