0

I'm working on accessibility features for WordPress web sites, and I need some <div>s to behave as links, so that I will be able to reach them with the TAB button.

I can use CSS code only (No HTML changes). Is there a way to do it?

If I could give tabindex to an element without a number, it would help me because I don't want to lose the other links on the page...

SeReGa
  • 1,219
  • 2
  • 11
  • 32
  • For the visual effect you can use a box-shadow and to move the page to it you can use window.location.hash which is js... – kpie Oct 10 '16 at 07:43
  • 1
    Possible duplicate of [How do you make a div "tabbable"?](http://stackoverflow.com/questions/13637223/how-do-you-make-a-div-tabbable) – Theodore K. Oct 10 '16 at 07:44
  • 1
    you cannot change the underlying html of the templates in word-press. – kpie Oct 10 '16 at 07:45

2 Answers2

1

you can use the following::

div{
    content:tabindex("0");
}
kpie
  • 9,588
  • 5
  • 28
  • 50
0

You'll always need a number to order tabindex. So there's the solution with html only (css is only for the visual on this example but does not affect to functionallity).

You can use css to reach this too but you still need a number and will need an id for each one (with different, ordered numbers on classes) and its more lines than doing it as this.

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 snippet, click on white space of page, and press tab twice, then shift + tab. Works as there are form-controls or links. Hope it helps, Cheers!

JoelBonetR
  • 1,551
  • 1
  • 15
  • 21
  • so you can't help me.. I can't use the solution you offer, as I described – SeReGa Oct 10 '16 at 08:54
  • you simply cannot use tabindex without a number (cuz it's an index as the self name indicates, huh?) Anyway, you can add some numbers and do it properly. As i said or generating it dynamically using JS (but tis not recommended). I'm telling you the correct way to proceed, if you want to reach the same with a wrong procedure ok, it's up to you but you'll get wasted before reach this properly. Regards – JoelBonetR Oct 10 '16 at 08:57
  • 1
    Oh, and if you want to reach this without edit the templates, the only way it occurs me is using jquery, adding the property (tabindex) and value (number) on each div on document ready – JoelBonetR Oct 10 '16 at 09:04
  • ok that's sounds better. but I still hope to find an interesting solution with CSS – SeReGa Oct 10 '16 at 12:52