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:

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.