When creating accessible web pages, the best principle to keep in mind is that standard HTML elements are fully accessible by default. This is a great starting point, but often, the standard set of HTML components does not provide the broad spectrum of complex design and functionality that many creators desire. One powerful tool that can help stretch the abilities of customized elements is the tabindex attribute.
The Role of tabindex
Assistive technology users frequently use the tab key to navigate between the elements on a web page. Usually, the order in which interactive elements receive focus via the tab key is loaded by the browser in the order that elements appear in the Document Object Model (DOM) or, in other words, the page’s HTML code.
The tabindex attribute can be used to change this order, to make an otherwise inactionable element focusable by the tab key, or to make an element unable to get tab key focus. This can be a useful accessibility aid, but it also has the potential to cause significant problems, so it should be used with caution.
Manipulating Focus with Positive tabindex Values
The tabindex attribute’s value indicates the element’s position in the page’s tab order. Setting tabindex to a positive integer (greater than zero) causes that element to gain focus at that specific point in the tab order.
For example, an element with tabindex="1" will be the first element a user lands on when pressing the tab key, while tabindex="42" will place the element in the forty-second tab position.
This manipulation can be helpful in ensuring actionable elements follow the visual reading order, especially in complex visual layouts or when content is dynamically added or removed from the page.
However, managing positive tabindex values can become complicated and difficult to maintain. It is often better to achieve the desired focus order by inserting dynamic content in the DOM where it logically fits.
Misaligning the tab order with the logical visual reading order can disorient users with low vision and confuse non-visual users trying to understand the page’s layout and element relationships.
Using tabindex="0" to Enhance Accessibility
Assigning a tabindex value of “0” to an element inserts it into the page’s tab order based on its position in the DOM, regardless of whether the element is natively actionable. This can be useful for making non-keyboard-accessible elements, like graphical widgets or clipped text, accessible to users of assistive technology.
For instance, using tabindex="0" can ensure that data points on a chart or hidden text (clipped by CSS overflow) are reachable via the keyboard, aligning with the Web Content Accessibility Guidelines (WCAG).
However, adding tabindex="0" should be done thoughtfully. Non-interactive elements like headings or paragraphs generally should not be made tabbable.
Keyboard-only users must access the entire content, but they should not have to navigate through unnecessary tab-stops to reach the desired content.
Excessive tab-stops can also hinder screen reader users, as screen reading software loads web content into a virtual buffer for navigation with arrow keys.
Preventing Focus with tabindex="-1"
The tabindex attribute can also be used to make an element on a web page unfocusable by the keyboard. When the tabindex value is set to -1, the element in question will not receive focus from the tab key.
This is often necessary to bring an equitable experience to more complex components, like carousel sliders. In a carousel, a collection of information slides is shown either one or a few slides at a time, and the user advances through the slides with controls like “next” and “previous” buttons.
For users of assistive technology to have an equal experience, only the slides being shown should be reachable by keyboard users. This means that any actionable items in the rest of the slides (the slides not being shown) must be taken out of the tab order procession.
This is accomplished by applying tabindex="-1" to all of these currently invisible elements. The result is a carousel that does not require keyboard users to tab through all the slides to get to the next block of page content, in the same way that mouse users have the option to scroll past the carousel without advancing through all the slides.
The tabindex of -1 is also useful for managing focus when moved with an in-page “jump” link. Typically, textual content (headings, for example) does not receive focus from the tab key.
However, when multiple sections on a page are scrolled into focus visually when a mouse user activates a “jump” link, this action must also be made available to keyboard users. The keyboard focus must be moved to the appropriate target so keyboard users will begin navigating from that point and so that users of screen reading software will begin reading from there.
This can be accomplished by setting the link’s href attribute to a hashtag followed by the id attribute of the desired target, which, if unactionable, will also need to be given a tabindex="-1" attribute. This will make the text or heading focusable from the “jump” link, but it will still remain outside of the tab order of the page, retaining an equitable experience for all users.
Conclusion
The tabindex attribute is a versatile tool for creating accessible web content. When used correctly, it can bring complex functionality to all users, ensuring an equal and efficient experience.
However, its improper use can introduce challenges that may undermine accessibility efforts.
This is where third-party audits and live-user testing become invaluable. By involving real users and expert evaluations, potential issues can be identified and addressed early, ensuring that your web content is not only compliant but genuinely usable for everyone.
This collaborative approach drives more inclusive digital experiences, reinforcing your commitment to accessibility and usability.
