Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Skiplinks für alle Browser

Dieser Artikel ist veraltet, und wurde durch diesen Artikel ersetzt

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

Der einfachste Fall

Im Prinzip ist ein Skiplink nichts anderes als ein Verweis (Link) ganz zu Beginn einer Seite zu einem Sprungziel (Anker) weiter unten auf der gleichen Seite.

<a href="#skip">zum Inhalt</a>

Das Sprungziel (Anker):

<a id="skip"></a>

Damit sind moderne Gecko basierte Browser (z. B. Firefox) zufrieden, und wir könnten es eigentlich auch sein.

Skiplinks können auch irritierend sein

Ein solcher Link kann eventuell für sehende Mausbenutzer irritierend sein. Möglicherweise tut sich nämlich beim Anklicken des Skiplinks nichts Sichtbares auf der Seite. Dass der Tastaturfokus nach dem Klicken anderswo liegt, wird der Mausbenutzer möglicherweise gar nicht bemerken. Deshalb machen wir den Skiplink nur beim "Tabben" sichtbar:
Dazu erhält der Link zuerst eine Klasse:

<a class="skiplink" href="#skip">zum Inhalt</a>

und dann wird das CSS erweitert:

/* Definition Skiplink */
.skiplink a,
.skiplink a:hover,
.skiplink a:visited {
	position: absolute;
	overflow: hidden;
	top: -1000px;
	left: -1000px;
}

.skiplink a:focus,
.skiplink a:active {
	position: absolute;
	top: 0;
	left: 0;
}
/* Ende Skiplink */

Achtung Falle!

Ein leider nur allzu häufiger Fehler: Den Skiplink mit CSS display:none verstecken, in der Annahme, dass er von Screen Readern dennoch gelesen wird. Nein! Mit display:none wird der Skiplink sehr zuverlässig auch vor Screen Readern (und allen Anderen!) versteckt. Bekannt ist dieses Verhalten seit 2003: Screen Reader Visibility Wozu also sich erst die Mühe machen, wenn display:none alles wieder zunichte macht.

Sonderbehandlung für den Internet Explorer

Wie nicht anders zu erwarten, braucht der Internet Explorer eine Sonderbehandlung:
Das Sprungziel (der Anker) muss innerhalb eines Elements mit definierter Größe liegen. hasLayout heißt der Fachausdruck beim IE hierfür. Ohne hasLayout springt der Internet Explorer nicht.

Um dem Sprungziel Layout zu geben, packen wir das Sprungziel in einen Container namens skipcontainer ein:

<div id="skipcontainer"><a id="skip"></a></div>

und diesem Container geben wir per CSS eine beliebige Weite:

#skipcontainer {
width: 1px;
}


Anmerkung:
Eine umfassende Erklärung zu hasLayout gibt es bei satzansatz.de (in Englisch) oder bei onhavinglayout.fwpf-webdesign.de/ (auf Deutsch).

Browser jenseits von Firefox und IE

Leider genügt das immer noch nicht. WebKIT basierte Browser (Safari, Chrome, Konqueror) machen noch immer nicht, was wir erwarten. Diese Browser scheinen zwar das Spungziel (den Anker) anzuspringen, aber beim nächsten Tabben ist der Fokus wieder, wo er vor dem Sprung war (also in der Regel am Seitenanfang). Dieses Verhalten der WebKIT basierten Browser ist nicht einmal unlogisch; nämlich, wenn man zu Grunde legt, dass nur Elemente fokussierbar sind, die auch eine Aktion ausführen können, zum Beispiel Verweise, Textfelder, oder Buttons. Leider ist genau dieses Verhalten der WebKIT Browser der Grund, warum Skiplinks dort nicht funktionieren.

Um nun auch diesen Browsern das gewünschte Verhalten beizubringen, setzen wir den Fokus per Javascript. Ein onclick Event-Handle im aufrufenden Link erledigt dies:

<a class="skiplink" href="#skip"
onclick="document.getElementById('skip').focus();
return false;">
zum Inhalt</a>

Damit das Sprungziel per Event-Handle fokussierbar wird, machen wir einen Verweis (Link) aus dem Sprungziel:

<div id="skipcontainer">
<a href="#" id="skip">&nbsp;</a>
</div>


Anmerkung:
der Whitespace &nbsp; als Linktext ist nötig. Ein Link ohne Linktext würde nicht fokussiert. Damit der Whitespace nicht gezeigt wird (z. B. mit einem Unterstrich beim Durchtabben o. Ä.), wird er per CSS aus dem Viewport verschoben:

#skip {
position:absolute;
left:-1000px;
top:-1000px;
}

Das funktioniert. Besonders elegant ist dieser zusätzliche Link ohne Ziel aber nicht. Screenreader z.B. lesen jetzt beim Sprungziel (Anker) einen seiteninternen Link vor - der aber keinerlei Zweck hat; das ist irritierend. Mit einem Trick lässt sich aber auch dies vermeiden.

Wir brauchen ja nur für WebKIT basierte Browser das Sprungziel als Link. Screenreader Nutzer arbeiten aber überwiegend mit dem IE. Also flugs eine Browserkennung für WebKIT. Wir fragen per PHP den User Agent ab, den der Browser an den Server schickt. (Es stimmt; dieses Verfahren ist nicht sehr zuverlässig. Aber wir haben keine andere Möglichkeit. Und da es uns nur um die Behebung eines "Schönheitsfehlers" geht, können wir akzeptieren, dass u. U. ein Benutzer einen "falschen" User Agent schickt.)

<?php
$ref ="";
$ev_handle=" ";
if(isset($_SERVER["HTTP_USER_AGENT"])
   && strpos($_SERVER["HTTP_USER_AGENT"],"KHTML")!== false){
$ref = 'href="#"';
$ev_handle = "onclick=\"document.getElementById('skip') »
           .focus(); return false;\"";
}
?>

Hinweis: Zeilenumbruch bei » löschen!

(WebKIT Browser schicken den String "KHTML" im User-Agent mit - www.aadmm.de/de/br.htm)

Und nun schreiben wir per PHP nur für WebKIT Browser den onclick-Event in den Link:
Aus:

<a href="#skip">Zum Inhalt</a>

wird:

<a href="#skip"<?php echo $ev_handle; ?>>Zum Inhalt</a>

Und für WebKIT Browser das Sprungziel als Link.
Aus:

<div id="skipcontainer">
<a href="#" id="skip"> </a>
</div>

wird:

<div id="skipcontainer">
<a <?php echo $ref; ?> id="skip"> </a>
</div>

Womit wir für alle Browser, die das nicht brauchen (IE, Geckos wie Firefox), die irritierende Verwendung eines Links ohne Funktion vermieden haben.

Eine abschließende Bemerkung zum Opera

Vor der Version 9.5 benutzt man im Opera A and Q um vorwärts/rückwärts zum nächsten Link zu springen.
(Versionen ab 9.5 können das immer noch, wenn in Extras - Einstellungen - Erweitert - Schnellzugriff - Einzel-Tastaturkürzel aktivieren gewählt ist).
Ansonsten wird in Versionen ab 9.5 mit Strg + Pfeil aufwärts/abwärts navigiert.
Vermutlich nutzen aber erfahrene sehende Opera Benutzer ohnehin die räumliche Navigation mit Umschalt - Pfeiltasten. Skiplinks sind für diesen Personenkreis wohl eher entbehrlich.

Nachtrag 09.03.2011

Opera mag die Skiplinks nicht. Die Skiplinks werden schlicht ignoriert. Und ich habe bisher keine Lösung für das Problem gefunden. Da dies, wie oben gesagt, Tastatur-User gar nicht bemerken, weil sie die räumliche Navigation anwenden, und Screen Reader ohnehin mit Opera nichts anzufangen wissen, habe ich mich entschlossen, den nicht funktionierenden Skiplink vor Opera per CSS zu verstecken.

Der CSS-Hack für neue Opera:

noindex:-o-prefocus, .gotocontent {
display:none;
}

Nachtrag 04.08.2014

Bedingt durch die Fortschritte bei Browsern (und auch assistiven Technologien wie Screen Readern) dürften die meisten der obigen Techniken (aus dem Jahr 2008!) inzwischen überholt, nicht mehr nötig, ja teilweise sogar falsch sein.
Beispiel für eine inzwischen falsche Technik in diesem Blogartikel

In einem aktuellen Projekt habe ich folgende, wesentlich einfachere Technik eingesetzt:

<p><a class="skiplink" href="#skip">zum Inhalt</a></p>

<a href="#skip" id="skip" role="heading"><h1>Überschrift</h1></a>

Bemerkungen:

Getestet mit: NVDA / Firefox 31.0, NVDA / IE 8, Safari OS X 10.9, Safari iOS 7.

Demo

Andere Quellen

Eine sehr schöne Abhandlung zum Thema gibt es von Dirk Jesse. Dirk ist der Autor des Frameworks YAML, und hat die von ihm beschriebene Technik auch in YAML integriert.

Creative Commons Lizenzvertrag
Artikeltext (nicht Bilder!) Creative Commons CC BY-NC-SA 3.0 DE

2 Kommentare

  1. Jean-Jacques Sarton schrieb am Sonntag, 28.02.10 18:23 Uhr:

    Guten Tag,

    ich versuche die Webseite meinen Dorf Barriere arm zu gestalten und natürlich habe ich das Überspringen von Links eingebaut, dies lief wunderbar unter FF, mit Webkit Browser ging es nicht, somit bin ich nach wenig Suche suf diese Seite gelandet. Ich bedanke mich für die Tipps sie sind Wertvoll.

    MfG.

  2. Tromposaund schrieb am Donnerstag, 26.01.12 11:58 Uhr:

    Sehr gute Funktion und gut beschrieben. Danke für die übersichtliche und klare Erklärung. Damit war es ein leichtes die Sprünge auf unserer Website einzubauen.

    Wer ein Beispiel möchte, gerne hier:


    [Edit:]
    Lieber (SEO-)Trompsaund,
    Dein Beispiel zeigt nur, dass du versuchst, hier einen Backlink abzustauben. Wenn du wirklich, wie behauptet, einen Skiplink eingebaut hättest, dann hätte ich den Link sogar stehen lassen. ;-)
    Schade, dass sogar Musikerkollegen zu so schäbigen Methoden greifen. :-(

Ihr Kommentar zu diesem Artikel:

Über Ihren Kommentar zu diesem Artikel freue ich mich. Ich behalte mir jedoch vor, Spam kommentarlos zu entfernen.