TabIndex and Web Accessibility
The HTML tabindex attribute can be used to improve the experience of a webpage for disabled users, however, if used in-appropriately this can also break the experience and flow of a webpage for disabled users (or users trying to navigate the webpage using the tab key).
tabindex is an HTML attribute that can be assigned to any HTML element. The major aim of adding the tabindex attribute to an element is to inform the browser that the element is focusable when using the tab key on the keyboard to navigate a web page.
The tabindex attribute accepts a negative or positive integer value as well as the value zero. The common values often assigned to tabindex is -1, 0, 1 (you can also assign any other integer value).
Positive Values
Assigning a value greater than zero an element’s tabindex attribute moves that element away from its position on the page while tabbing through and adds more priority on it. This breaks the normal flow of the document for users with assistive technologies.
Negative Values
Assigning a negative value makes the element inaccessible while tabbing through the document with the tab key. This value is fine and usually implored by off-screen interactive elements that are shown to a user when they get to that part of the page (with a little JavaScript).
Value zero
Assigning the value zero to an element tells the browser to manage to handle the focus to that element by its position in the web document’s source code or the element’s position in the DOM tree. This method is used when trying to build custom interactive components with none focusable elements like span, div, li e.t.c. A zero tabindex value makes the browser aware that the component/element is interactive and focus should be handed to it when the user gets to its position in the document.
This is the ideal value to assign to the tabindex attribute.
Considerations
It can be tricky to change the visual positions of elements on a webpage using floats, column-reverse, or row-reverse values on flex-direction CSS properties as well as any other CSS properties which make elements appear visually different from their DOM positions. This tends to disorganize the intended flow of the page when navigating the document with the tab key. This also happens with native focusable elements such as links, buttons e.t.c Browsers use an element’s position in the DOM or source code to determine when it should get the focus while tabbing through the document using the tab key.
Recommendations
- Avoid using styles to change the visual positions of interactive elements which will place the elements different from its position in the DOM or source code.
- Add elements and structure your documents in a sequential order that interactive elements can be accessed.
- Get in the habit of tabbing through your web pages periodically to ensure the tabbing experience for interactive elements works as expected.
- Use accessibility evaluation tools to see if it meets web accessibility guidelines.
- If possible have an accessibility expert audit your web pages to uncover more accessibility issues.
