132

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?

TheBoss
  • 1,994
  • 4
  • 16
  • 21

5 Answers5

175

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>
Francis Nepomuceno
  • 4,935
  • 4
  • 29
  • 35
  • 3
    NB: tabindex is not a valid attribute of divs in HTML <5. [Reference](http://www.w3.org/TR/html401/interact/forms.html#adef-tabindex) {Corrected after Neps pointed out my error} – Dancrumb Nov 30 '12 at 00:34
  • 6
    @Dancrumb, yes they are in HTML5 – Francis Nepomuceno Nov 30 '12 at 00:35
  • 60
    Probably better to use `tabindex=0` though so as to not muck with the natural tabbing order. – steveax Nov 30 '12 at 01:49
  • 12
    btw, this doesn't allow one to click it with enter though. – Ciantic Jul 03 '14 at 20:25
  • 6
    Hmn, @Ciantic any idea how we can work around or simulate a click on enter while tabbed to that div? hmn – Jomar Sevillejo May 12 '15 at 03:35
  • 3
    You can simulate a click by adding an **onkeypress** event function. In this function, you must 1) prevent the default action, 2) inspect the key pressed and if it is a key that should send a click, trigger a click on the element in code. – b_laoshi Mar 29 '19 at 07:21
8

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

AwokeKnowing
  • 7,728
  • 9
  • 36
  • 47
  • 2
    I believe it is better to use the keydown event instead of the keyup event as recommended here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets. An apparent advantage of keydown is that if you return false from your hander function (after the click() call), it will correctly stop the propagation of the event elsewhere on the page, whereas with keyup this doesn't work. – M Katz Feb 17 '19 at 11:03
  • 1
    Space might also scroll the page. You might need to use the preventDefault function as well. – b_laoshi Mar 29 '19 at 07:26
6

Add the tabindex="0"attribute to each div you want tabbable. Then use CSS pseudo classes :hover and :focus, for example to signify to the app user that the div is in focus and clickable, for example. Use JavaScript to handle the click.

var doc = document;
var providers = doc.getElementsByClassName("provider");

for (var i = 0; i < providers.length; i++) {
    providers[i].onclick = function() {
      console.log(this.innerHTML);
    };
}
.provider {
    flex: 0 1 auto;
    align-self: auto;
    width: 256px;
    height: 48px;
    margin-top: 12px;
    margin-right: 12px;
    text-align: center;
    line-height: 48px;
    
    text-transform: uppercase;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 10%;
    background-color: gray;
}

.provider:hover{
  cursor: pointer;
}

.provider:focus{
    -webkit-box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.4);
    box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.4);
}
<h4>Click in this area first then press tab</h4>
<div id="email" class="provider" tabindex="0">email</div>
<div id="facebook" class="provider" tabindex="0">facebook</div>
<div id="github" class="provider" tabindex="0">github</div>
<div id="google" class="provider" tabindex="0">google</div>
<div id="twitter" class="provider" tabindex="0">twitter</div>
Ronnie Royston
  • 16,778
  • 6
  • 77
  • 91
3

Make elements tabbable and clickable with key press using jquery

Assumptions

  • All elements that are of a non-tabbable, non-clickable type and should be clickable have an onclick attribute (this could be changed to a class or other attribute)
  • All elements are of the same type; I will use divs.
  • You're using jquery

Sample html: 

...

<div onclick="clicked(this)">Button 1</div>
<div onclick="clicked(this)">Button 2</div>
<div onclick="clicked(this)">Button 3</div>

...

Jquery code: This is the code that will run when the page has loaded. It needs to run on your HTML page.

$(()=>{
    // make divs with an onclick attribute tabbable/clickable
    $('div[onclick]')
        .attr('tabindex', '0')                     // Add tab indexes
        .keypress((evt)=>{
            var key = evt.key;
            evt.preventDefault();                  // Ensure all default keypress
                                                   // actions are not used
            if (key === ' ' || key === 'Enter') {  // Only send click events for Space
                                                   // or Enter keys
                evt.currentTarget.click();         // Run the click event for element
            }
        });
});

You can find a working example here.

b_laoshi
  • 443
  • 6
  • 12
1

For anyone that shows up on this page for the opposite intention, as in to make a div tag NOT tabbable: https://github.com/WICG/inert is a good way.

Ambrown
  • 361
  • 2
  • 8