Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

Verstecker Sprunglink - ist mein IE6 kaputt?

Freitag, 18. Januar 2008

Seiteninterne Sprunglinks, etwa zum Inhalt, oder zur Navigation, sind ein wichtiges Element, um die Benutzung von Webseiten ohne Maus, ausschließlich mit der Tastatur zu erleichtern.
Vielfach werden diese Sprunglinks per CSS versteckt, und nur beim Durchtabben mit der Tastatur angezeigt.
Hierfür gibt es eine etablierte Technik, die eigentlich immer und überall funktioniert.
Eigentlich.
Nur nicht mit dem IE6 auf der folgenden Testseite, die ich eigens erstellt habe, um diese Technik in verschiedenen Browsern zu testen.
http://webdesign.weisshart.de/test/skiptest/skip.html

Hier der Quelltext der Seite:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
<title>Titel</title>
<meta http-equiv="Content-Style-Type" content="text/css" />

<style type="text/css">

#skip a:link,
#skip a:visited {
position:absolute;
left:-500px;
top:-500px;
width:0;
height:0;
display:inline;
}

#skip a:focus,
#skip a:hover,
#skip a:active {
position:absolute;
left:0;
top:0;
width:auto;
height:auto;
display:block;
}

</style>

</head>
<body>

<div id="skip"><a href="#navsprung">Sprung zur Navigation</a></div>

<div id="inhalt">
<h1>Titel</h1>
<p>Irgendwelche Inhalte</p>
<p><a href="http://www.example.com">ein normaler Link</a></p>
</div>

<p>Viele Trennlinien, um Raum zu schaffen:</p>
<hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr />

<h2><a name="navsprung">Navigation</a></h2>

</body>
</html>



3 Kommentare

  1. Das Zauberwort ist mal wieder hasLayout im IE. Gib dem Sprungziel eine Breite (alles ausser auto) oder ein zoom:1 und schon geht es wieder. Weiterführende Literatur dazu bei http://www.jimthatcher.com/haslayout.htm

    Kommentar von Der Caspers — Samstag, 19. Januar 2008 - 9:12 Uhr

  2. Danke für den Hinweis an einen langsam vezweifelnden Webworker.
    Und nein; das Zauberwort greift in diesem Fall nicht.
    Mein Problem ist nämlich nicht, dass das Sprungziel nicht angesprungen würde.

    Vielmehr geht es mir darum, dass der versteckte Skiplink beim Tabben im IE6 nicht - oder, schlimmer, nur manchmal - angezeigt wird, obwohl er sehr wohl in der Statuszeile angezeigt wird, sobald der Tastaturfocus auf dem Skipling liegt, und dann auch funktioniert.

    Nachtrag 20.01.08:
    Möglicherweise spielt hasLayout doch auch in diesem Zusammenhang eine Rolle. Kurioserweise aber nicht für den IE, sondern mit dem Safari? Ich bin noch am Studieren und Testen.

    Kommentar von Fritz — Samstag, 19. Januar 2008 - 15:09 Uhr

  3. Die Lösung - aber keine Erklärung (ich muss nicht alles verstehen ;-):

    anstelle von:

    <div id="skip"><a rel='nofollow' href = "#navsprung">Sprung zur Navigation</a></div>

    jetzt Folgendes:

    <a rel='nofollow' href = "#navsprung" class="skip">Sprung zur Navigation</a>

    und im CSS natürlich:
    a.skip:link, usw.
    anstelle von:
    #skip a:link, usw.

    zu sehen hier: http://webdesign.weisshart.de/test/skiptest/skip2.html

    Kommentar von Fritz — Samstag, 19. Januar 2008 - 15:20 Uhr

Einen Kommentar abgeben

Damit Code-Beispiele richtig angezeigt werden, müssen Sonderzeichen maskiert werden (z.B. < zu &lt;).


(notwendig)

(notwendig)

Spamschutz:
Je nach Inhalt wird Ihr Kommentar eventuell nicht sofort angezeigt, sondern muss manuell freigeschaltet werden.

Archiv:

Kategorien:

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