Using tabindex Effectively
From where I stand,
tabindex is an underutilized HTML attribute. That being
said, when used incorrectly, it can prove disastrous! Let's talk about the when
and the how of
Making "Non-Clickable" Elements Focusable
manipulation or via a framework like React, making a
<div> as interactive as a
<button> is trivially easy. Unfortunately, a
<div> will not be a part of the
document's tab order like a
button! That's where
tabindex comes in handy.
Let's say we have a
<div> that opens up a modal when clicked like so:
<div class="button">I trigger some behavior.</div>
By default, the keyboard cannot find this element, and thus, neither will screen readers be informed that the elememnt is interactive. This is a huge problem from an accessibility standpoint! This is a clear violation of the WCAG 2.1 guideline regarding keyboard accessibility.
To remedy that, add
role="button" to inform screen
readers that the element is interactive.
<div class="button" tabindex="0" role="button">I trigger some behavior.</div>
Ta-dah! The element can now receive keyboard focus whenever the user hits the tab key.
Making Elements Programmatically Focusable
<div class="alert alert--error" id="my-alert">Warning! Invalid password.</div>
Let's say we want to move focus to this alert:
Unfortunately this won't work! We need to first add some value for
So let's try
tabindex="0" like before:
<div class="alert alert--error" id="my-alert" tabindex="0"> Warning! Invalid password. </div>
Woohoo! This works. Sort of.
Unfortunately, what we've done is introduced the alert in to the keyboard tab order. As a user tabs through interactive elements, they then encounter the alert, only to find that it isn't actually an interactive element.
Negative tabindex to the Rescue!
This is when leveraging
tabindex="-1" comes in to play. This makes the element
both programmatically focusable and keeps the element outside of the tab order
of the document.
So, we end up with:
<div class="alert alert--error" id="my-alert" tabindex="-1"> Warning! Invalid password. </div>
Other Values for tabindex
Other, positive values are technically valid for use with
these should pretty much never ever be used. By supplying positive values for
tabindex, the "natural" tab order of the page can be modified, unfortunately
resulting in accidental keyboard tab traps, a big
tabindex is a critically important attribute, particularly when working to
build a page that is usable for keyboard-only users and our friendly
neighborhood power user.
tabindex="-1"to elements that need to receive focus programmatically but should not be a part of the keyboard order of the document and
- Never ever use a positive value for