nicht angemeldet
Versteckte Skiplinks
Hallo,
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>
Ich bin, gelinde gesagt, ratlos.
Hier der (komplette = relevante Teil des) 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>
Gruß Fritz
-
Hi!
Was genau erwartest du? Ich habe den code so im IE 6 Ausgefuehrt. Es wird die Seite angezeigt. Mit Tab kann ich den versteckten Link (das verstecken finde ich reichlich ueberfluessig) angewaehlt und bin damit dann direkt zum anker gehuepft. Sollte noch etwas passieren?
-
Hallo,
Was genau erwartest du?
Dass das CSS korrekt ausgeführt wird. Wenn per Tabulator der focus auf dem versteckten Link ist, dann sollte auch der IE6 den Link anzeigen, wie das richtige Browser tun (und sogar der IE/)
Mit Tab kann ich den versteckten Link angewaehlt und bin damit dann direkt zum anker gehuepft.
Das stand nie in Zweifel.
Sollte noch etwas passieren?
Ja, siehe oben.
Gruß Fritz
-
hm... also bei mir wird der link dann huebsch sichtbar.
nach dem studium der anderen posts und ein paar versuchen geb ich dir aber recht. er ist manchmal nicht sichtbar.
-
Hallo,
er ist manchmal nicht sichtbar.
Danke. Genau das ist das Problem. Und für dieses Problem suche ich eine Lösung. Oder, besser, den Fehler in meinem code.
Oder eben die Aussage: der IE6 kann das manchmal, und manchmal nicht.
Spaß beiseite:
Selbst der IE6 kann das. Auf anderen Seiten. Sogar ich habe Seiten geschrieben, die der IE6 versteht. Nur: ich komm' nicht dahinter, warum ausgerechnet auf dieser minimalistischen Testseite der IE6 zickt.Gruß Fritz
-
-
-
-
<meta http-equiv="Content-Style-Type" content="text/css" />
^^^
Vielleicht beharrt der IE als einziger von allen auf einer HTML-Seite und bringt deshalb Dinge durcheinander.(Nur eine Vermutung)
Viele Grüße!
_Dirk--
»[The Killers - When You were young] Scheint im ersten Moment der perfekte Lovesong: ein bisschen rotzig, aber lovely.«
- Top Fives, Nicht-Poppmusik, ihr zweites mal.-
Hallo,
<meta http-equiv="Content-Style-Type" content="text/css" />
^^^
Vielleicht beharrt der IE als einziger von allen auf einer HTML-Seite und bringt deshalb Dinge durcheinander.(Nur eine Vermutung)
Leider falsch vermutet.
Die Seite _ist_ eine html Seite. Der markierte meta Tag hat damit nichts zu tun. "Content-Style-Type"Gruß Fritz
-
Die Seite _ist_ eine html Seite. Der markierte meta Tag hat damit nichts zu tun. "Content-Style-Type"
Entschuldige, das »style« hatte ich übersehen.
Viele Grüße!
_Dirk--
»Sohn Tyler wird dabei ausgepixelt, wenn er durchs Bild läuft, und man wünscht sich beinahe, bei Ozzy hätten sie's auch getan.«
- Medienrauschen, In Love: Henne. Hahn.
-
-
-
Hallo,
Hierfür gibt es eine etablierte Technik, die eigentlich immer und überall funktioniert.
War das nicht eher für die Screenreader (die irgendwann mal @media="reader"
verstehen sollten, statt solcher CSS-Hacks)?Nur nicht mit dem IE6 auf der folgenden Testseite, die ich eigens erstellt habe, um diese Technik in verschiedenen Browsern zu testen.
Bei meinem IE 6 klappt es. Mit der Einschränkung, dass die Seite irgendwie
den focus verlieren kann und dann TAB zwischen Adresszeile und google wechselt.Ging es dir um das Problem?
Grüsse
Cyx23
-
Hi!
.. zwischen Adresszeile und google wechselt.
Hoe?
-
Hallo,
.. zwischen Adresszeile und google wechselt.
Hoe?
Hab nicht weiter anaylsiert warum er (IE6) das gerade versucht hatte.
Grundsätzlich wird die Adresszeile markiert und beim nächsten Tab wieder
aus dem Focus gelassen, statt dass gleich wieder die Links einer Seite
durchlaufen werden.Da unterscheidet sich aber m.E. die hier gepostete Seite nicht von anderen
Beispielseiten, zumindest auf meinem PC mit dem hier vorliegenden IE 6.
Der versteckte Link scheint sonst zu funktionieren und wird angezeigt, auch
beim IE 7.Grüsse
Cyx23
-
Hallo,
Der versteckte Link scheint sonst zu funktionieren
Ja, er funktioniert.
und wird angezeigt,
Aber eben nur nicht reproduzierbar manchmal. Tab bitte mal ein paar mal vorwärts und rückwärts, vielleicht mal n reload dazwischen
auch beim IE 7
Das stand nie zur Diskussion. IE7, und auch alle richtigen Browser setzen das korrekt um.
Gruß Fritz
-
-
-
Hallo,
War das nicht eher für die Screenreader (die irgendwann mal @media="reader" verstehen sollten,
Irgendwann ist gut. Und bis dahin sollen Menschen mit körperlichen Beeinträchtigungen, die ihnen die Benutzung einer Maus nicht ermöglichen, eben warten?
statt solcher CSS-Hacks)?
Ich seh keinen Hack, sondern nur korrektes, valides CSS
Mit der Einschränkung, dass die Seite irgendwie den focus verlieren kann und dann TAB zwischen Adresszeile und google wechselt.
Und damit ist dann die Zielgruppe s.o. bestens bedient?
Gruß Fritz
-
Hallo,
Ich seh keinen Hack, sondern nur korrektes, valides CSS
Insofern habe ich mich vielleicht etwas unglücklich ausgedrückt, aber dann
dürfte * html body wohl auch kein Hack sein?Mir sind auf barrierfreien Seiten (wohl des Bundes) ähnliche
Konstrukte wie von dir gepostet, allerdings mit dem hier nicht
empfehlenswerten em statt px, untergekommen, die zu Browserfehlern
geführt haben. Eine Ausnahme, aber immerhin.Und grundsätzlich sollte m.E. durchaus auf Defizite wie ein fehlendes
@media="reader" hingewiesen werden, zumal gerade die Barrierefreiheit
auch immer in Verbindung mit "richtigem" Code genannt wird.Und damit ist dann die Zielgruppe s.o. bestens bedient?
Entscheidend ist irgendwann was rauskommt, klar. Ich kann aber hier den
Unterschied zischen IE 6 und IE 7, der ja wohl nach deinem anderen Posting
bestehen soll, noch nicht nachvollziehen, werd mir das morgen nochmal
genauer anschauen.Grüsse
Cyx23
-
Hallo,
dürfte * html body wohl auch kein Hack sein?
wird im allgemeinen als hack bezeichnet, aber lassen wir das. Ich will keine Grundsatzdiskussion, sondern nur wissen, warum mein Code vom IE6 nicht bzw. nur manchmal verstanden wird.
Mir sind auf barrierfreien Seiten (wohl des Bundes) ähnliche
Konstrukte wie von dir gepostet,Dieses Konstrukt ist, wie gesagt, ein Quasistandard, wenn es um Barrierefreiheit geht.
allerdings mit dem hier nicht empfehlenswerten em statt px, untergekommen,
em oder px, macht in diesem Kontext keinen Unterschied. Ich hab's getestet.
Ich kann aber hier den Unterschied zischen IE 6 und IE 7, der ja wohl nach deinem anderen Posting bestehen soll, noch nicht nachvollziehen,
Ganz einfach: der IE7 zeigt den versteckten Link beim Durchtabben, der IE6 nur "manchmal". Häufig z.B. beim Rückwärtstabben.
Gruß Fritz
-
Hallo,
wird im allgemeinen als hack bezeichnet, aber lassen wir das. Ich will keine Grundsatzdiskussion, sondern nur wissen, warum mein Code vom IE6 nicht bzw. nur manchmal verstanden wird.
Will ich dir ja auch nicht vorenthalten, sofern ich eine Lösung weiß.
Trotzdem halte ich gerade bei solchen Punkten Grundsatzdiskussionen
für sinnvoller als gewissermaßen im leeren Raum.em oder px, macht in diesem Kontext keinen Unterschied. Ich hab's getestet.
Grundsätzlich sind hier mit em eher Fehler möglich als mit px, auch wegen
der stärkeren Auswirkung von Schriftvergrößerung etc..Die Browser haben offenbar keinen fiktiven Platz ausserhalb des Viewport,
sondern begrenzte Ressourcen. Entsprechende Fehlfunktionen sind eigentlich
bekannt, auch wenn es sich um Ausnahmen in Zusammnehang mit großen Werten
handelt.Ansonsten nicht so wichtig, sofern es hinreichende Erfahrungen gibt, welche
Werte problemlos funktionieren.Ganz einfach: der IE7 zeigt den versteckten Link beim Durchtabben, der IE6 nur "manchmal". Häufig z.B. beim Rückwärtstabben.
Mit dem Rückwärts-tab konnte ich es jetzt nachvollziehen.
Hab noch etwas probiert, andere CSS-Methoden (oder Rendermodus) scheinen
bislang nicht zu helfen.Immerhin erfolgt doch ein "focus", so ist an der Statuszeile beim Rück-Tabben
erkennbar, dass der Link angesprochen werden könnte, nur wird es nicht in
der Seite erkennbar.Falls kein CSS-Trick hilft, bleibt vielleicht noch JavaScript, um
passend die Seitendarstellung zu verändern, notfalls kann ja auch einfach
ein neues Element -auch ohne funktionierenden Link- als Kopie erzeugt werden.So etwas funktioniert hier schonmal:
window.onload=function(){ document.getElementById('skip').firstChild.onfocus=function(){ status='8';}; document.getElementById('skip').firstChild.onblur=function(){ status='9';}; }Grüsse
Cyx23
-
-
-
-