Digital Accessibility Index: Learn where the world’s leading brands fall short on accessibility.

See Report

WCAG 2.1 - SC 2.4.3 Focus Order

When users navigate sequentially through content, they encounter information in an order that is consistent with the meaning of the content and can be operated from the keyboard. This reduces confusion by letting users form a consistent mental model of the content.

The way that sequential navigation order is determined in Web content is defined by the technology of the content. For example, simple HTML defines sequential navigation via the notion of tabbing order. Dynamic HTML may modify the navigation sequence using scripting along with the addition of a tabindex attribute to allow focus to additional elements. If no scripting or tabindex attributes are used, the navigation order is the order that components appear in the content stream.

Official Requirements:

2.4.3 Focus Order: 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.

How to fix:

  • Design your page so that the order in which the content appears in the source corresponds to the meaning of the content.
  • Use the tabindex attribute to create a logical tabbing order throughout the document
  • When using DOM scripting to insert content, insert the content immediately after the trigger control.

Not sure where to start?

Start with a free analysis of your website's accessibility.