Skiplinks für alle Browser

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.

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 */

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. Wozu also sich erst die Mühe machen, wenn display:none alles wieder zunichte macht.

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 onhavinglayout.fwpf-webdesign.de/ (auf Deutsch).

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

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.