Tab-Navigation funktioniert nicht unter IE
Joachim Trautner
- barrierefreiheit
Hallo,
ich habe ein Problem mit dem base-tag: ist dieser gesetzt (zwischen den head-tags), kann man im IE (Version 6 und 7) keine Links mehr mit der Tabulatortaste erreichen. Dies ist aber für barrierefreie Seiten unabdingbar. Im Firefox funktioniert es problemlos.
Da die Seite unter Typo3 läuft, wird der base-tag für die Extension realURL zwingend benötigt.
Hat jemand eine Idee, wie das Problem zu lösen ist?
Gruß, Joachim
Hallo,
ich habe ein Problem mit dem base-tag: ist dieser gesetzt (zwischen den head-tags), kann man im IE (Version 6 und 7) keine Links mehr mit der Tabulatortaste erreichen.
Diese Ursache-Wirkung-Beschreibung ist so nicht nachvollziehbar. Beispielsweise kann man in folgendem Testfall alle Links auch im IE mit der Tab-Taste erreichen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Beschreibung der Seite</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<base href="http://aktuell.de.selfhtml.org">
</head>
<body>
<p>
<a href="test">Test1</a>
<a href="test">Test2</a>
<a href="test">Test3</a>
</p>
</body>
</html>
Dies ist aber für barrierefreie Seiten unabdingbar. Im Firefox funktioniert es problemlos.
Da die Seite unter Typo3 läuft, wird der base-tag für die Extension realURL zwingend benötigt.
Hat jemand eine Idee, wie das Problem zu lösen ist?
Dazu müsstest Du das Problem zunächst mal zeigen.
viele Grüße
Axel
Hallo,
hmmm, stimmt, das Beispiel funktioniert. Ich meinte, das Problem auf den base-tag eingegrenzt zu haben. Woran könnte es dann liegen? Habe schon verschiedenstes probiert, leider ohne Erfolg.
Hat jemand eine Idee, wie das Problem zu lösen ist?
Dazu müsstest Du das Problem zunächst mal zeigen.
Anschauen kann man sich das Problem unter http://www.oberursel.de.
Gruss, Joachim
Hallo,
Hat jemand eine Idee, wie das Problem zu lösen ist?
Anschauen kann man sich das Problem unter http://www.oberursel.de.
Dein Problem ist, dass Du onfocus bei jedem Link eine Funktion blurLink(this) aufrufst, welche gleich wieder .blur() aufruft, wenn der Browser ein IE ist. So, works as designed ;-).
Beispiel:
...
<div id="mainNavi"><ul><li><a href="rathaus/" onfocus="blurLink(this);" onmouseover="over('img9_220d_0');" onmouseout="out('img9_220d_0');" ><img src="typo3temp/menu/ed8b6e173f.gif" width="74" height="30" border="0" alt="Rathaus" name="img9_220d_0" /></a></li><li><a href="politik/" onfocus="blurLink(this);" onmouseover="over('img8_220d_1');" onmouseout="out('img8_220d_1');" ><img src="typo3temp/menu/361449546d.gif" width="60" height="30" border="0" alt="Politik" name="img8_220d_1" /></a></li><li><a href="information/" onfocus="blurLink(this);"...
Deine Funktion im http://www.oberursel.de/typo3temp/javascript_ebd9c81938.js:
...
var msie4 = (browserName == "Microsoft Internet Explorer" && browserVer >= 4);
...
// Blurring links:
function blurLink(theObject) { //
if (msie4) {theObject.blur();}
}
...
Was onfocus und .blur() machen, kannst Du hier http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onfocus und hier http://de.selfhtml.org/javascript/objekte/elements.htm#blur nachschlagen.
Nimm diese komische Reaktion auf das Focus-Ereignis raus, und es wird auch im IE funktionieren.
Btw. Die Tab-Reihenfolge ist noch etwas unsinnig, weil die Blöcke im Quelltext in einer anderen Reihenfolge stehen, als später durch das CSS positioniert. Das würde ich noch ändern, also die Reihenfolge auch im Quelltext so umstellen, wie gewünscht.
Alternativ könnte sonst auch hiermit http://de.selfhtml.org/html/formulare/tastatur.htm#tabreihenfolge gearbeitet werden.
viele Grüße
Axel
Hallo,
Dein Problem ist, dass Du onfocus bei jedem Link eine Funktion blurLink(this) aufrufst, welche gleich wieder .blur() aufruft, wenn der Browser ein IE ist. So, works as designed ;-).
Das war's :) Danke für den Tip!
Joachim