Focus Order

This information relates to criterion 2.4.3 Focus Order, which states:

If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.

When you navigate with a keyboard, mostly using the TAB key, you should notice that interactive elements on the page receive focus. This means that there is some visual way of showing where you are. As you tab through these elements, they must occur in a logical order.

How does the focus order work?

The best way to write code is to stick to valid html and then the focus order will just follow the Document Object Model (DOM) order. Mostly, items will occur in the order that they are written in your code.

There are some things that might push things out of order though:

• Floating objects - this is usually used to wrap text around an image. The image might be set to float to the left or right of the text. It looks good and it's fine, but check that it doesn't break your focus order, especially if the image is also a link.
• Tabindex - this is overused in html code. You shouldn't need to use tabindex very often. It is a way of artificially changing the focus order. If you do need to use it, try to avoid positive tabindex values, as they move the item to the top of the list and then often cause the focus to miss other elements on the page.

The most important thing to do here is test your page. Reload the page and then tab through, making sure every interactive element receives focus in a logical order.