Tabindex is a HTML attribute that can set an order for focusable elements which allow keyboard focus for non focusable elements and remove focus for a focusable element. The value for a tabindex attribute can be any integer. This means the tabindex attribute can either be a negative, 0 or positive value.
Tabindex=”0″
Providing tabindex=”0″ for a focusable element does not impact on any functionality or sequence of tabbing order.
Example:
<a href=”http://www.maxability.co.in”>Maxability</a> is equal to <a href=”http://www.maxability.co.in” tabindex=”0″>Maxability</a>
However providing tabindex=”0″ is useful when you want to provide focus for non focusable element. Any HTML element other than link and form control is a non focusable element. Eg: <span>, <div>, <span>, <img etc.
While designing custom components such as a button with <img and adding functionality to them using javascript events make the component inaccessible for keyboard only and screen reader users. The below button cannot be navigated with keyboard alone.
To make this custom button focusable with keyboard operable use tabindex=”0″. The sequential order of the rest of the focusable elements on the page are not impacted when we use tabindex=”0″ for an element.
- Tabindex=”0″ is also used to set focus to a link when href is not defined.
- When tabindex=”0″ is used it does fall into the sequential tab order of the source code. So no special care is required for setting sequential order.
- Additional care need to be taken to ensure that keyboard action associated is fired with enter key and spacebar keys when tabindex=”0″ is used for custom controls.
- Tabindex=”0″ is used along with ARIA roles such as buttons and links.
Positive Tabindex
Positive tabindex (tabindex=”1″, tabindex=”2″ …) is used when specific elements on the page need to receive focus no matter where they are placed. The tabbing order follows on the sequence of the values in the attribute. This means tabindex=”1″ receives first keyboard focus when navigated with the tab key tabindex=”2″ and so on. Positive tabindex is best to be avoided.
If a particular element needs to receive first focus keep that element top in the source code and use CSS to visually arrange in the location required on the screen.
If positive tabindex is used on a list of items as follows,
<ul>
<li><a href=”index.html” tabindex=”4″>Home</a></li>
<li><a href=”aboutus.html” tabindex=”3″>about</a></li>
<li><a href=”our_services.html” tabindex=”2″>Our Services</a></li>
<li><a href=”our_products.html” tabindex=”1″>our products</a></li>
</ul>
- When navigated with tab key and screen reader the order in which the elements are read is our products, our services, about and home.
- When navigated with arrow keys using screen reader the order is Home, About, Our Services and Our Products.
This behavior confuses screen reader users. See example.
In another scenario observed on one of the websites, tabindex=”1″ and tabindex=”2″ is provided for user name and password respectively and login and cancel buttons are not provided with tabindex. Due to this user name and password will be the first focusable elements on the page, followed by the elements in the source code order. The login and cancel buttons are focused later in the page. This behavior frustrates low vision and screen reader users including keyboard only users. See example of tabbing order on form.
In other scenario where a skip to main content mechanism is available on the page and a tabindex is provided for a navigational item in the header with a positive value, on activating skip to main content link the keyboard and screen reader focus moves on to the main content area, upon pressing the tab key focus moves on to the item that has the positive tabindex value not to the first focusable item in the main content. This behavior will be very confusing for screen reader and keyboard only users and the purpose of skip to main content will not be served. See example with tabindex on skip link.
Negative tabindex
Negative tabindex especially tabindex=”-1″ must be used with at most care. Using tabindex=”-1″ on focusable elements such as links and form controls will remove the element from tabbing order. Do not use this attribute to an element that can be navigated or activated by the user.
Tabindex=”-1″ is best used when any element focus need to be set with scripting. Taking focus to a modal when it is opened is a good example. Since <div> tags are not focusable elements tabindex=”-1″ helps.
Conclusion
- Avoid using positive tabindex to the extent possible.
- Use tabindex=”0″ only for non focusable elements to receive focus.
- Use negative tabindex to move focus to elements that have focus set using scripts. Never use negative tabindex for the elements that need to be navigated and are actionable.
