What Is Tab Focus?
Users who access webpages or other content using keyboard navigation use the tab key to move between interactive elements. These elements should be toggled through in the order in which they appear on the document or web page. When an interactive element is selected, or “focused”, there should be a visual queue on the screen highlighting that element.
What Do Developers Need to Know?
Most of the commonly used interactive HTML elements will have tab focus enabled by default. These elements include clickable anchor tags, clickable link elements, buttons, input tags that do not have a type of “hidden”, “select” elements, and text areas. Elements included in this list will also, by default, focus in the order in which they appear on the page. So if your’e using good semantic HTML tags, you’ll be making much less work for yourself.
If you find yourself with an interactive element that is not included in the above list, you will need to manually enable tab focus. The easy way to do this is to add a “tabindex” attribute to the element. If you set the value of this attribute to “0”, it will automatically be added to the flow of the document and should focus in the correct order. You can also set the value, manually, to indicate where in the order you’d like the element to appear (i.e. tabindex=“2”), but this is generally frowned upon as it can cause issues.
You may also set the tabindex attribute of an element to “-1”. This has a couple of uses. First and foremost, it removes the element from tab focus. In other words, it will be skipped. Setting the value to “-1” also allows you to programmatically enable tab focus. Say you have an element that you don’t want focusable on page load but after some event, you’d like to be focusable—you’d use tabindex=“-1” and the “.focus()” function to add that behavior.
Accessibility is an important topic that every developer should think about. Making your content compatible with keyboard navigation is a great place to start.