RSS 2.0 FeedVerstecker 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 öhne 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
Einen Kommentar abgeben
XHTML erlaubt: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote> <code> <em> <i> <strike> <strong>
Code-Beispiele
Damit Code-Beispiele richtig angezeigt werden, müssen Sonderzeichen maskiert werden (z.B. < zu <).
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
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
Die Lösung - aber keine Erklärung (ich muss nicht alles verstehen
:
anstelle von:
<div id="skip"><a href = "#navsprung">Sprung zur Navigation</a></div>jetzt Folgendes:
<a 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