Logical focus order

Interactive elements must receive focus in a meaningful sequential order that does not change what they mean or how they work.

Meeting the Web Accessibility Standard

When the sequence in which keyboard focusable controls are encountered does not change what they mean or how they work, this meets WCAG 2 Success Criterion 2.4.3 Focus Order (Level A).

Focus order can affect meaning and operation

Much of the time, the sequence in which interactive elements receive keyboard focus contributes to their meaning and operation.

If an interactive element receives focus in an unexpected order, this can change users’ understanding of what they’re able or supposed to do with it.

Example of an element receiving focus in an unexpected order

A button labelled “Go!” might not be clear on its own, but when it receives focus coming right after a search field, the meaning of the “Go!” button is clear: It is for submitting the search terms, which is the step that logically comes right after entering them in the search field.

If that button did not receive focus immediately after the search field, not only would its meaning be unclear, but this would make operating the search feature difficult for keyboard users.

Visual versus programmatic order

Sighted users experience web content visually. For content in left-to-right languages like English or Māori, the visual reading order of content is expected, for the most part, to go from left to right and top to bottom.

Screen reader users experience web content through the programmatic reading order, which is, by default, based on the sequence of elements as they appear in the DOM (Document Object Model).

Note: By default, the page's keyboard focus order matches the page’s programmatic reading order. This is because a page’s keyboard focus order is also initially determined by the DOM order.

Keep the focus order logical

The best and easiest way to deliver and maintain a logical focus order is to:

position content visually on the screen to be read left to right and top to bottom (for languages like English or Māori), and
organise content and interactive elements in the DOM so that their programmatic reading order makes sense and matches the visual reading order.

Be careful of changing the focus order in ways that, depending on context, could confuse the user — for example, when the:

CSS order property is used in a flexbox container or grid layout to visually rearrange some interactive content and the focus order does not match the expected visual reading order — to learn more, read The order property and accessibility — Ordering Flex Items — MDN Web Docs
tabindex attribute or some JavaScript is applied in a way that changes the default focus order and the focus order does not follow the content’s programmatic reading order.

Whatever the keyboard focus order, make sure to maintain the content’s meaning and operability. When interacting with a control, it must remain clear to the user:

what it is
how to use it
where and what the user is doing on the page.

For more information and examples of meaningful keyboard focus order, see: