tabindex
I have some situations on this site that I don't know what the best practices are in regards to using the tabindex HTML attribute. I am going to read some blog posts (or only one) on the topic to learn more about the best practices.
References
Using tabindex
The default tab order provided by the DOM position of semantic HTML elements is convenient, but there may be times you need to modify the tab order. Moving elements in the HTML is ideal, but might not be feasible. In these cases, you can use the tabindex HTML attribute to explicitly set an element's tab position.
tabindex can be applied to any element, although it's not necessarily useful on every element and takes a range of integer values. With tabindex, you can specify an explicit order for focusable page elements, insert an otherwise un-focusable element into the tab order, and remove elements from the tab order:
tabindex="0": Inserts an element into the natural tab order. The element can be focused by pressing TAB, and the element can be focused by calling itsfocus()method.tabindex="-1": Removes element from natural tab order, but the element can still be focused by calling itsfocus()methodtabindex="5": Anytabindexgreater than0brings that element to the front of the natural tab order. If there are multiple elements with atabindexgreater than0, the tab order starts from the lowest value that is greater than 0 and works its way up.
When possible, it's best to arrange your source code so the DOM sequence provides a logical tab order. Only add tabindex to content that is interactive.
The select element can receive basic focus, but once there, you can use the arrow keys to expose additional selectable options. If you build a custom select element, it's important to replicate that behavior, so keyboard users can still interact with your control.
Further Reading
When To Use tabindex="0"
When a web page includes interactive controls such as buttons, links, and form fields, it is important that they are focusable. Unless a keyboard accessible alternative is provided, these elements must be reachable using a keyboard alone. This is important for people browsing with a desktop screen reader and people browsing with a keyboard or other input device.
People navigate focusable controls on a web page using the TAB and SHIFT+TAB keys, or, for some controls like radio buttons, the arrow keys.
Some elements, like <button>s, are focusable by default while others, like <img> and <span> elements, are not.
Except for a minority of cases, avoid applying tabindex="0" to static content.
Only apply tabindex="0" to HTML elements that:
- Are not keyboard focusable by default
- Are provided with an interactive role
- Have an action associated with them that requires them to be reachable using the keyboard
You need to apply tabindex="0" to elements used as containers for content where the containing element contains the CSS overflow property. In addition, you need to provide an appropriate role and accessible name to the container so that people using a screen reader are made aware of what the content represents and why the element has received keyboard focus.
tabindex Mozilla Docs
- The
tabindexglobal attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the TAB key, hence the name) and determine the relative ordering for sequential focus navigation. - It accepts an integer as a value.
- A negative value means that the element is not reachable via sequential keyboard navigation.
tabindex="0"means that the element should be focusable in sequential keyboard navigation, after any positivetabindexvalues. The focus navigation order of these elements is defined by their order in the document source,- A positive value means that the element should be focusable in sequential keyboard navigation, with its order defined by the value of the number.
- If the
tabindexattribute is included with no value set, whether the element is focusable us determined by the user agent.
Some focusable elements that have a default tabindex value of 0 set under the hood by the user agent. These elements are:
<a><area><button><frame><iframe><input><object><select><textarea><summary>
User Agent
A user agent is a computer program representing a person, for example, a browser in a Web context. Besides a browser, a user agent could be a bot scraping webpages, a download manager, or another app accessing the Web. Along with each request they make to the server, browsers include a self-identifying User-Agent HTTP header called a user agent (UA) string. Spam bots, download managers, and some browsers often send a fake UA string to announce themselves as a different client. This is known as user agent spoofing.