URLs stimmen nicht (?), IE-Hilfe

[e-zebra]

Hallo liebes Forum, bräuchte eure Hilfe:

auf der (sich im Aufbau befindenen!) Website http://www.sehbehindertenschule-duesseldorf.de/
funktioniert der :focus-Effekt nicht: er soll in der Navigation genauso wie der :hover-Effekt dargestellt werden.

CSS:

#header .mod_navigation li:hover,#header .mod_navigation li:focus,#header .mod_navigation li:active{display:inline;margin:0;padding:8px 10px;background:url("tl_files/kts_schule/nav/hover_nav.png") center center no-repeat;list-style-type:none;}

ähnlicher Code für die linke Navigation, funzt auch nicht...

Danke schonmal!

[th2409]

Also, bei mir geht's.
Am Ende ist :focus ja eine eindeutige Sache aus dem CSS und hat mit TL wenig zu tun. Und, wie erwartet: die Behandlung ist nicht in allen Browsern adäquat (gut), insbesondere macht sicher der IE6 Ärger. Ich habe jetzt aber nicht alle durchgetestet.

[e-zebra]

Bei mir funktioniert weder mit IE noch mit MF... wie funktioniert es denn bei dir, th2409? sicher, dass du nicht den hover-Effekt meinst? mir gehts hauptsächlich um (barrierefreies) tab-Browsing.

[MacKP]

Hallo e-zebra,
wennn du das mit dem link machst klappt es wie du möchtest ->
#header .mod_navigation li a:hover, #header .mod_navigation li a:focus, #header .mod_navigation li a:active

Ich bin mal auf das ergebniss deiner Arbeit gespannt. Hast ja noch so einiges zu machen ;-)

Viele Grüße

[Nina]

Kleiner Tipp: Der Kontrastwert bei der Navigation (gelber Hintergrund zur Schrift) ist nicht ausreichend (nur 3,4:1).

Wenn du den Farbwert für den Text auf #962000 abänderst, erreichst du immerhin einen Kontrastwert von 5,5:1 (Stufe AA bei der WCAG 2).

Mit einer Textfarbe von #6D1700 kommst du zum Kontrastwert von 7,8:1 und somit Stufe AAA der WCAG 2.

Da die Schule sich explizit an sehbehinderte Menschen richtet, wäre das sicher gerade hier eine sehr wichtige Sache und die Stufe AAA ein wichtiges Ziel.

[e-zebra]

Vielen Danke euch schonmal!

@Nina: Wo bekommst Du diese Werte? Hast du vielleicht noch irgendwelche interessanten Links zur Barrierefreiheit in peto?

edit: Und noch was: Meiner Meinung nach müsste der aktive Navigationspfad doch mit folgendem CSS genauso aussehen, wie die anderen mit einem a:hover/a:focus Effekt? Tun sie aber nicht, beim :hover wird irgendwie ein Teil der bg-Grafik abgeschnitten. Warum??? arrgh...

#left .mod_navigation li.active{background:url("tl_files/kts_schule/nav/active_nav.png") left center no-repeat;list-style-type:none;}

#left .mod_navigation li.active:hover{background:url("tl_files/kts_schule/nav/active_nav.png") left center no-repeat;list-style-type:none;}

#left .mod_navigation li a:hover,#left .mod_navigation li a:active,#left .mod_navigation li a:focus{background:#FFCB15 url("tl_files/kts_schule/nav/hover_nav.png") left center no-repeat;list-style-type:none;}

[xchs]

Soweit ich weiß, sind z.B. die Pseudoklassen speziell im IE (<= 7) nur für das Anker-Element vorgesehen.

[th2409]

Die Pseudoklasse :focus ist im Grunde gar nicht für einen (beliebigen) Link oder ein anderes Element vorgesehen; laut Definition ist sie an Formularelemente(!) gebunden. Man kann mit ihr also die Fokus-Darstellung des Eingabefeldes ändern, in Deinem Falle etwa Benutzername und Passwort. Auf alles andere kann man sich nicht verlassen!
Im Übrigen habe ich Chrome probiert, und der Fokus wird tatsächlich auch für die Links der Navigation richtig angezeigt; andere Browser sind störrischer (wenngleich eine in unserem Sinne korrekte Darstellung laut CSS-Spezifikation aber auch keiner von ihnen verlangen könnte..).