Some of my clients have faced lawsuits that I have helped them assess and address. By far the most common issue is images lacking alternative text. But not far behind it is the the focus order of the page. The vast majority of the complaints I’ve seen have claiming focus order issues are problematic, really aren’t. Today we’re going to look at focus order and why people interpret this wrong.
Assuming the order
The first problem is that they complaints are often based upon what an end user THINKS the order should be. Let’s talk about a product card.
We examined the Target product card for some of its Back to School backpacks. The focus lands on some important information and not others. Focus never goes to the price or delivery options. However, that information is not composed of interactive controls.
2.4.3 Focus order is just that – focus order. Not everything should receive focus. Many people think that focus is the only way to read what is on the screen. They seem to feel this strongly.
Non-text content should not be in the focus order.
What should be in the focus order?
Actionable items only belong in the focus order. Buttons, links, inputs, tab controls, anything that has a tabindex of 0.
Are there exceptions?
Sort of. If you have a navigation or table of contents, it may link within the page. We may use a tabindex on the target of that link. When we do this, we usually are linking to a landmark or a heading. In both cases, the object we land on is static and identifies the content we are about to consume.
Since these are static elements, we don’t want them in the tab order, but want them to receive focus. Instead of using tabindex="0", we use a value of negative one (-1).
Important Note:
There is no reason to use a value higher than 0. Providing positive values to the tabindex forces a specific order the user must go through. This makes it very difficult if the path breaks to get back to where you were. Additionally, if text and other content is added dynamically, you need to record where the user is. Then, you need to recalculate the tab order. Finally, find the control to put the user back on it.
Using properly labeled landmarks provides a fast way for users to navigate the page.
Using the focus order sparingly
Development, especially in the retail space, has gotten reckless with the use of active controls. It takes 7 presses of a tab key to get through 1 product card. When you have 24, 50, or 100 per page, keyboard only users get frustrated.
Whenever possible, eliminate the control. I’ve written on this already so you can read my Quick Tip: Use Fewer Links article referencing the Product Card concept.
How should focus order go?
It depends.
In general, you need to follow the direction of the language. In most western countries, this means top to bottom, left to right. In right-hand languages like Arabic and Hebrew, then we read right to left.
But then there is following the content. Each container in your HTML creates a context. In certain cases, like on a multi-column display, the focus still follows the general rule. This also applies to well defined landmarks. However, focus only follows the general rule within the named container. This is why if we have a vertical left navigation, we don’t tab out of the navigation into the main. Even though the main has the next active control to the right. We maintain the top to bottom, left to right until we come to the end of the container. If there is one column of links, then the movement will only be top to bottom. And that is ok. Once you complete the landmark’s controls, you will continue to tab. This will put you in the next container laid out in the code.
When we have a large list of links. We want to provide a way to skip them if they aren’t what the user wants. There is no hard definition of how many links qualify for a skip link. However, the general consensus is around 5 links that are repeated on multiple pages. And 10 links if it is an in page object like a chart, video, or say a product card. Remember Target had 7.
Summary
Only active controls should be in the focus order. Static content should never be, unless it is receiving it via JavaScript for a page jump. Focus order should follow the language’s reading order. But it will also follow the code order.
Have any thoughts or questions? Come find me on LinkedIn and BlueSky!