Tabbing for Accessibility

Tabbing is one of the ways someone can navigate through a website simply be using the tab button. Tabbing is important as it gives accessible users the ability to easily navigate your website.

Here are two tips to improve your websites tabbing experience.

1. Don't mess with Tabindex

Tabindex is an html attribute that can manipulate the navigation order of actionable elements. It also allows non-actionable elements like div or p to be tabbable but it's highly discouraged.

So what's wrong with tabindex if it gives you full control on how to order your tabbable items? The problem stems from the fact that changing the navigation order by having a tabindex greater than 0.

Let's say you have this sort of HTML structure for your buttons.

<button tabindex="4">I have tab index 4</button>
<button tabindex="1">I have tab index 1</button>
<button tabindex="3">I have tab index 3</button>
<button tabindex="5">I have tab index 5</button>

When the user tabs through, it will hit the one whose tabindex is 1 followed by 3 then 4 and finally 5. After that, let's say you want to add a couple more buttons.

<button tabindex="4">I have tab index 4</button>
<button>I use the default tab index</button>
<button tabindex="1">I have tab index 1</button>
<button>I use the default tab index</button>
<button tabindex="3">I have tab index 3</button>
<button tabindex="5">I have tab index 5</button>
<button>I use the default tab index</button>

Because you committed to using the tabindex attribute, any subsequent actionable items you add to your website might need a tabindex of its own.

What should we do if we shouldn't use tabindex?

Answer: You don't have to use anything. Ordering your elements logically will not only remove tabindex headache but will also make your website more accessible.

2. Focus, focus, and focus-visible?

Since tabbing triggers a focus event on the actionable element, we can use CSS's :focus property to add special styling to the element.

button:focus {
  background: #000000;
  color: #FFFFFF;
}

input:focus {
  background: #000000;
  color: #FFFFFF;
}

By default, the focus event also gets triggered onmousedown. What if we only want the styling to occur while tabbing. Many websites have solved this problem with the help of Javascript like:

If you don't want to Javascript, there is a proposed pseudo-class called :focus-visible where style in this pseudo-class will only be visible through tabbing.

To learn more about it see :focus-visible.