Make Any HTML Element Selectable Using the Tab Key for Accessibility

Website accessibility is getting more and more important these days. One of the key factors in web accessibility is the ability to access all of the features of the website with the keyboard. If any element is clickable with a mouse, it needs to be reachable by keyboard using the tab key and return/enter to “click” it.

HTML links automatically work this way. But, if you have, say, a div that performs some function when clicked via a JavaScript click handler, that element won’t by default be reachable by using the tab key, and won’t be “clickable” using a keyboard. In other words, it won’t be compliant with today’s accessibility laws.

One way to make it clickable is to change the <div> into a <button>. But if you’re not able to do that (for example because the code is from a WordPress plugin or theme), keep reading below.

How to Make Any HTML Tag Reachable With the Tab Key

The first step is to make the element reachable by using the tab key. That is really easy to do. Simply attach the “tabindex” attribute to the element with a value of zero. So, for a div, it would look like this:

<div tabindex="0">Click Here</div>

The value of the tabindex forces the order in which the tab key can reach these elements. For accessibility purposes, you should always just set the value to zero because setting a positive value actually makes it more difficult for people using assistive technology to navigate the page.

Now, when you load the page and press the tab key, the element should be one of the “stops” as you step through all of the links using the tab key.

If you’re not seeing anything, it might be because the :focus state isn’t styled. Try adding some styling, like a bright border, to the container’s :focus or :focus-within pseudo class.

But, what if you don’t have access to the element and you don’t want to hack your theme? You can add the tabindex attribute using some jQuery like this:

jQuery( "#your_div_id" ).attr( "tabindex", "0" );

How to Make the Tag “Clickable” Using the Return/Enter Key

OK, the HTML element is now reachable using the tab key but nothing happens when you focus on it at press the Return or Enter key. Making that happen requires some JavaScript.

Use the snippet of code below to make any element with the class, “keyboard-clickable” clickable when it is focused and the Enter/Return key is hit:

// MAKE THIS CLASS CLICKABLE USING THE KEYBOARD
jQuery( document ).on( "keypress", ".keyboard-clickable", function(e) {
  if (e.which == 13) 
    { 
    jQuery( this ).click();
    }
});

This is a really great way to make a bunch of elements clickable. Add the JS code, then slap “keyboard-clickable” on all of the elements that you want to be clickable by keyboard.

ARIA Role

If the element to be clicked is not an anchor tag or button tag, you can make the HTML element appear as a button to screen readers by adding ‘role=”button”‘. It looks like this:

<div tabindex="0" role="button" aria-pressed="false"> Your Content </div>

The two states of the button, pressed or not, can be represented using the ‘aria-pressed’ attribute. More info on ARIA roles. Note, these attributes are necessary if you use the HTML button tag.

That should do it! Let me know if you have any questions or comments! – Brian

Please Leave a Question or Comment

Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

1 Comment
Inline Feedbacks
View all comments
trackback

[…] Make Any HTML Element Selectable […]