2016-10-10 2 views
0

Ich arbeite an Barrierefreiheit Features für WordPress-Websites, und ich brauche einige <div> s als Links, so dass ich in der Lage sein werde, sie mit der TAB-Taste zu erreichen.Wie kann ich ein Div sich wie ein Link verhalten

Ich kann nur CSS-Code verwenden (keine HTML-Änderungen). Gibt es einen Weg, es zu tun?

Wenn ich tabindex auf ein Element ohne Nummer geben könnte, wäre es mir helfen, weil ich nicht will, um die anderen Links auf der Seite verlieren ...

+0

Für den visuellen Effekt können Sie einen Box-Shadow verwenden und die Seite dorthin verschieben Sie können window.location.hash verwenden, das ist js ... – kpie

+1

Mögliche Duplikate von [Wie machen Sie ein div "tabbable"? ] (http://stackoverflow.com/questions/13637223/how-do-you-make-a-div-tabbable) –

+1

Sie können die zugrunde liegende HTML der Vorlagen in Word-Press nicht ändern. – kpie

Antwort

1

Sie folgende verwenden können ::

div{ 
    content:tabindex("0"); 
} 
+0

"Ungültige Eigenschaft Wert" – SeReGa

+0

Put Zitate um die 0? – kpie

+0

Ich habe es versucht, die gleiche Warnung ... – SeReGa

0

Sie benötigen immer eine Nummer, um tabindex zu bestellen. Also gibt es die Lösung nur mit HTML (CSS ist nur für das visuelle in diesem Beispiel, hat aber keinen Einfluss auf die Funktionalität).

Sie können CSS verwenden, um dies auch zu erreichen, aber Sie benötigen immer noch eine Nummer und benötigen eine ID für jede einzelne (mit anderen, geordneten Zahlen für die Klassen) und ihre mehr Zeilen als dies tun.

a{text-decoration:none; list-style:none; display:inline-block; margin:10px; color:#000;} 
 
div{background-color:#DDD; padding:15px;}
<a href="#"><div tabindex="1">lasasdsa</div></a> 
 
<a href="#"><div tabindex="2">ghfghfh</div></a> 
 
<a href="#"><div tabindex="3">dafs5d</div></a>

Run-Schnipsel, klicken Sie auf weißen Platz der Seite, und die Tabulatortaste drücken, zweimal, dann + Tab verschieben. Funktioniert wie Formularsteuerelemente oder Links. Hoffe es hilft, Prost!

+0

so können Sie mir nicht helfen .. Ich kann nicht die Lösung, die Sie anbieten, wie ich beschrieben – SeReGa

+0

beschrieben Sie können einfach Tabindex ohne eine Zahl nicht verwenden (denn es ist ein Index wie der Eigenname angibt, nicht wahr?) Wie auch immer, Sie kann einige Zahlen hinzufügen und es richtig machen. Wie gesagt oder dynamisch mit JS generieren (aber nicht empfohlen). Ich sage dir den richtigen Weg, um fortzufahren, wenn du dasselbe mit einem falschen Verfahren erreichen willst, ok, es liegt an dir, aber du wirst verschwendet, bevor du es richtig erreichen kannst. Mit freundlichen Grüßen – JoelBonetR

+1

Oh, und wenn Sie dies erreichen wollen, ohne die Vorlagen zu bearbeiten, ist die einzige Möglichkeit, die ich jquery verwendet, Hinzufügen der Eigenschaft (Tabindex) und Wert (Zahl) auf jedem Div auf Dokument bereit – JoelBonetR

Verwandte Themen