Login

team@digitalaccessibilitytraining.org


Tabindex

Public Article

Article is certified Certified Article

The content of this article is certified for accuracy by the Digital Accessibility Centre.

What is Tabindex?

The ‘tabindex’ attribute is an HTML attribute that specifies the tabbing order of elements on a web page when navigating through them using a keyboards Tab key. It controls the focusable elements and determines the order in which they receive focus.

The ‘tabindex’ attribute can be applied to various HTML elements, such as links (`<a>`), buttons (`<button>`), input fields (`<input>`), and other interactive elements. It accepts a numerical value, which determines the order of elements in the tab sequence. Elements with a lower ‘tabindex’ value receive focus first, followed by higher values.

In the event that multiple elements have the same ‘tabindex’ value, the elements navigate in the order they appear in the HTML source code.

Setting a tabindex of 0 makes a typically unfocusable element focusable. It won’t interfere with the structure or order of items on a web page. All it does is add an element to the normal flow of a web page. For instance, a div element isn’t typically focusable but would be if a tabindex of 0 was applied.

Setting a tabindex of -1 allows scripters to set a focus with a script, but it doesn’t put an element in the normal tab order of the page. The ‘-1’ setting is useful when the focus needs to be moved to something created or updated using JavaScript. Do not use this feature on elements that need to be keyboard navigable, as it will remove it from the default navigation flow.

DO NOT USE tabindexes of 1 or above, as this overrides the natural flow of the webpage.

Overall, the ‘tabindex’ attribute provides a way to control the keyboard navigation order and improve accessibility for users who rely on keyboard navigation rather than a mouse.

Tools Required, How to Test and Further Reading

Tools Required

  • Keyboard
  • Screen Reader
  • Web Developer Extension

How to Test Tabindex

  1. Open the webpage to be tested.
  2. Use the tab key on a keyboard to cycle through the page’s buttons, links, and other interactive elements.
  3. If the tab order jumps to different page sections, The tab order more than likely has a positive number somewhere. To fix this, use the Web Developer extension to zero the positive numbers using the ‘tabindex = 0’ code.
  4. Repeat steps 2 and 3 to ensure the tab order is now fixed.

WCAG 2.1/2 Guidelines Associated with Tabindex

Further Reading

Tabindex was posted on 06/07/2023 @ 15:21