How do you make a div "tabbable"?

Question

I have buttons that are div elements and I want to make them so that it is possible for the user to press the tab key on their keyboard and move between them. I've tried wrapping their text in anchor tags but it doesn't seem to work.

Does anyone have a solution?

Answer 1

Add tabindex attributes to your div elements.

Example:

<div tabindex="1">First</div> <div tabindex="2">Second</div> 

Per steveax's comment, if you don't want the tab order to deviate from where the element is in the page, set the tabindex to 0:

<div tabindex="0">First</div> <div tabindex="0">Second</div> 

Answer 2

for those interested, in addition to the accepted answer, you can add the following jquery to make the div style change when you tab to it, and also handle Enter and Space to trigger a click (then your click handler will do the rest)

$(document).on('focus', '.button',function(){     $(this).css('border','1px dotted black') }); $(document).on('keyup', '.button',function(e){     if(e.which==13 || e.which==32)         $(this).click() }); 

I'm sure someone has made this into a jq plugin $().makeTabStop