What Does Tabindex Mean? Tabindex Elements Error in Lighthouse Audit

You know that when you own a website you have to manage the users’ entire experience on the pages, right? Well, that is exactly what the tabindex is for. The most important feature of this attribute is that it allows you to manage the keyboard focus.

Well, what does it mean? In other words, what can smart management of web widgets provide you with within your website? Let’s review it together.

Screpy experts have brought together the most common warnings in Google Lighthouse audits for you. Among these, tabindex is among those that are frequently searched for. Tabindex attribute should be used correctly to optimize the experience of users navigating the site using the keyboard. Misuse can damage the accessibility of the content on your website.

Today, we will examine all the features of the tabindex attribute closely and take a look at what you can offer your users with it. Let’s get started right away if you’re ready, folks!

Do you want to increase your website traffic?

Try for free to boost your website traffic!

Register Now

What is Tabindex Attribute and Why Is It Used For?

When a tabindex attribute is used on a web page, the object becomes an element that can be focused with the keyboard. The tabindex attribute also determines how the user who focuses on the element will handle this focus. Generally, this value will be a numeric one, and the interaction captured with the keyboard is organized through values ​​of positive, negative, or 0.

So why is all this important? If web users surf on a desktop, they often use a mouse, that’s true. However, you still have to appeal to users who want to navigate your site using the keyboard. Otherwise, you could really lose a lot from your UX score. Someone who wants to navigate your site using the keyboard uses the arrow keys, the Enter key, the tab key, and more to jump from one element to another. While doing this, you need to determine which items can be missed by focusing. You can also use tabindex for this.

This choice will ensure that the focus is not on items that will take the user nowhere, and will allow the user to experience a quality website browsing using only the keyboard. You are at the right time to make such changes to your website.

Tabindex Attribute Usage Areas – Examples

Well, which areas can be navigated with the keyboard thanks to Tabindex?

• For example, imagine that you are on the log-in page on a website. Thanks to the tabindex attribute, the user can go to the username field, then the password field, and finally the ” login” button by using the keyboard. A similar situation applies to logging out. This is provided by tabindex. Let’s examine a sample code sequence together:

Similar to the above, some of the elements that can be focused can be listed as follows:

1. <a> elements with an href attribute
2. <input> elements that are not type = “hidden”
3. <link> elements with an href attribute
4. <select> elements
5. <textarea> elements
6. <button> elements

Each of the elements listed above are elements that can be focused by simply touching the keyboard. In Javascript, it is possible to focus on these elements using the focus () method. You can review this method by taking a look at the code snippet below:

document.querySelector("a").focus();

• A little note: Of course, you need to be very careful in how you place the items you want to focus on in the source HTML file. Because this sequence will directly determine which item the user will jump to using the keyboard keys.

With Tabindex you can:

1. You can make some elements in the source code of your web page focus.
2. You can completely remove the focusable feature of some elements in the source code of your web page.
3. You can arrange the order of the items that will be focused while users navigate the site with their keyboard.

It is possible to say that the tabindex attribute is extremely useful for all the above operations. This is exactly why this attribute is extremely valuable for Google Lighthouse audits.

How To Use Tabindex – Coding Tips for Web Developers

If you want to use Tabindex for your website, let’s say this: This attribute can be used for all elements on your site. So you don’t need the element to be focusable to use Tabindex attribute. As we said earlier, the value of the attribute can be of three kinds: 0, negative, or positive. Accordingly, different practices are applied. Let’s go through three different scenarios with you.

Using Negative Tabindex Values

If you assign a negative tabindex value for any element in your web page, you will ensure that the element in question is removed from the focus order. In other words, the negative tabindex value is to prevent the user from accessing a certain element with keyboard keys. This element is automatically skipped as the user moves from one item to the next.

For this, we wanted to show you a code example below:

<button type="button">Click me to start, then press the "tab" key</button>

<button type="button">I’ll be in focus first</button>

<button type="button" tabindex="-1">I won’t be in focus :(</button>

<button type="button">I’ll be in focus last</button>

• What it means: As you can easily see above, the user can focus on the first button with the keyboard, the second button is ignored and the user focuses directly on the third button. This is a sequence obtained with a negative tabindex value. You can use it too. Generally, -1 is preferred for negative value in code usage. But this is not the value you should use specifically. You can use -1 as well as – 77747478. The result will be the same. But it’s better to use -1 to make the code source cleaner and clearer. Remember, Google Lighthouse really cares about readability, and too long source code can slow down the speed.

Using Zero Tabindex Value

It is also possible to use the tabindex attribute with a value of 0. When you use this, you make the element in question focusable. However, you cannot determine a spesific order for focusing action: The user using his or her keyboard will be focus on the related elements by default order. If you use this attribute for non-focusable elements, you will make them behave as if they are focusable and the visitor can jump from one to another with default order.

We wanted to give you an example regarding this:

<button type="button">Click me to start, then press the "tab" key</button>

<button type="button">I’ll be in focus first</button>

<div tabindex="0">I’m a DIV and will be in focus second</div>

<button type="button">I’ll be in focus last</button>

• What it means: Let’s briefly summarize the code snippet you saw above. First of all, the first line says “Click me to start”. After the user clicks, the first focus will be the second line. Then the next line will have focus, and finally, the third line will have it. All of this is a default order and usually works.

Using Positive Tabindex Values

Did you know that it is also possible to edit your website using positive tabindex values? A tabindex attribute with a positive value is a good option for maximum selection chance.

Let’s set up a scenario: You want an element on your web page to be focusable, so users can easily access this element using only their keyboard. But that’s not all, of course. You also want to decide in which order the element in question will be focused. Instead of accepting the default order, a positive value with tabindex must be used in coding to process a specific order you want to create.

Let’s take a look at a code that uses a positive value tabindex attribute with you:

<button type="button" tabindex="1">I’m the first focusable item on the page</button>

<button type="button" tabindex="500">I’m the second</button>

• What it means: When we briefly examine the code above, we see that the first button is primarily determined as the first element to be focused on. The button on the second line is the next focus. Just like that, you can determine the focus order on different elements on your page. One of these elements can be at the top of the page, while the other one can be in the middle or at the end. This flow is completely determined by the code you will write and it becomes possible to be customized as you wish.

What Else Is Tabindex Used For?

We hope you understand how useful the tabindex attribute can be, thanks to the information we have reviewed so far. The correct use of this type of attribute can maximize the browsing page experience of your visitors using only their keyboards. The studies conducted also allow you to determine which elements in the source code of your web page can be made focusable via Javascript.

Well, what does it mean?

This actually means taking free will on your website. In the source code of the page, you can make the previously non-focusable elements focusable with a simple Javascript language coding and put it in a position accessible with the keyboard. The person using the keyboard can access the element in question or its surroundings with the help of just a few keys.

We have prepared a few different examples for you that you can review on this subject.

• First, let’s examine the code below. Here we see that an element that is actually focusable is transformed into a non-focusable element thanks to a tabindex attribute that has a negative value. Therefore, the user cannot access this element using the keyboard and cannot use the features of this element.

<div tabindex="-1">I'm a div</div>

• Second, if you want to make a non-focusable element focusable using Javacscript, you can simply use the focus () method. When you use this attribute, the button becomes accessible with the keyboard. Here is an example of a code snippet we have prepared for you:

<button type="button"

        onclick="document.getElementById('demo-div').focus();">

        Click me to focus the DIV

</button>

<div id="demo-div" tabindex="-1">I'm a div</div>

Using Negative Tabindex for Programmatic Focus

We now know very well that the negative tabindex is used specifically to remove tab focus from certain items. For example, the most important features of modal containers, which are frequently used in the software world, are that they have certain elements that are impossible to focus. As you can see from the examples above, these are various elements such as <div> or <section>.

So what do we do to get screen readers to focus on the right detail when a window is open?

• Modal content should reach a level that can be read by screen readers and be focusable.
• However, even if the content is focusable, the modal container itself should not be focusable.

It will be necessary to use the tabindex attribute with a negative value to meet the above conditions at the same time. We wanted to give you an example of this below:

<div id="modal" tabindex="-1">

    <!-- Modal content -->

</div>

<script>

function openModal() {

    document.getElementById("modal").focus();

    // Other stuff to show modal

}

</script>

Using Positive Tabindex for Programmatic Focus

If you want to use the tabindex attribute, which has a positive value, for programmatic focus, you need to know that you are actually using an anti-pattern.

Remember what the positive value does: it changes the order between elements that are focusable. Therefore, when you use this value for programatic focus, you change the source order of the elements in question.

Using Zero Tabindex for Programmatic Focus

When you use the tabindex attribute with a value of zero, you are actually restoring the focusable properties to certain items. Some items can be removed programmatically from these properties. This value helps them to be accessible with the keyboard. This can be an extremely good operation, especially for custom elements.

Because let’s give you information about custom button elements: Since they technically do not have a button label, they do not appear as focusable in default settings. It is possible to easily restore this feature to these elements, which have lost these features due to programmatic, with a simple tabindex. When you use this attribute, the custom buttons that become accessible via the keyboard as if they have a focusable feature, help you increase the browsing experience on your site.

Here is an example of this:

<my-custom-button tabindex="0">Click me!</my-custom-button>

How To Check If My Website Is Keyboard Accesible?

When a standard user enters your website, they should be able to easily navigate between focusable areas using the tab key on their keyboard. If you do not have this feature, there are some problems with your accessibility and UX scores. With Screpy, you can perform each of the Google Lighthouse audits specifically for each page and ensure that the shortcomings are determined specifically for each page. In this way, the optimization process will be easier.

There is of course one more way to tell if your pages are keyboard accessible. Go to your web page via the incognito tab and try to navigate by clicking the tab key. Ask yourself the following questions:

1. Can you focus on any element?
2. As you request the order of focus when jumping from one element to the next?
3. Are there any elements you want to change or make unfocusable while focusing?

It is possible to perform all the above operations easily and quickly by using the tabindex attribute.

Tip for developers to have an accessible web page:

So, is there anything you need to be aware of to make sure that your website is accessible via the keyboard without any additional settings? Actually, yes, it certainly does.

Using the commonly used built-in HTML elements on your site makes them universally accessible and focused on the keyboard. As we mentioned earlier in our content, custom buttons are not actual <button> and you need to make them focusable with a tabindex attribute that has zero value. We recommend that you avoid custom buttons to avoid code pollution and to ensure that the default version of your page is accesible.

Why is Accessibility Important for a Website?

Did you know that one of the most important categories that Google Lighthouse measures and scores by creating an audit are accessibility?

Just like any other search engine, Google wants its users to be able to access the information they request in the easiest way possible. That’s why you are requested to make your website accessible from every point of view and at any time for users using different devices. If you do not have the necessary features, your Lighthouse scores will also decrease. Moreover, this does not mean only a theoretical decline.

1. Accessibility ensures that any user who visits your site will have a loyal following.
2. The visitor who can easily navigate on your site with different devices or methods, is more likely to convert. Also, the total time spent on your site will increase.
3. All these values ​​are seen by Google and help increase the SEO score. As a result, you will get excellent results in ranking. Yes, you heard it right: SEO and UX are pretty much related as always.

FAQ

You May Also Like

• Elements that have a [tabindex] value greater than 0
• Why Is Your SEO Strategy Failing?
• No Accessible Names on Buttons
• Duplicated [id] Attributes on Active and Focusable Elements
• No Heading, Skip Link, Or Landmark Region in the Web Page