2.4.3 Focus Order [A]

Level A

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.>

Explanation

It must be possible to navigate through content in a way that makes sense. This means that content can be navigated in a logical way by screen reader users, keyboard users, and people who choose to use their own CSS style sheets.

Responsibilities

• Content
• Design
• Development
• QA

Requirements

• The visible focus order matches the DOM focus order.

Common mistakes

• The DOM order does not match the visual order because CSS properties like flexbox and grid-layout have been used to alter the visual presentation;
• The DOM order does not match the visual order because the tabindex attribute has been used with positive values to impose a tab order on the content that does not match the visual order;
• When CSS styles are disabled, the focus order is meaningless;
• When a user interaction causes content to be displayed, it does so before the trigger control in the DOM order.

Official resources

• 2.4.3 Focus Order
• Understanding 2.4.3 Focus Order
• How to meet 2.4.3 Focus Order

Other resources

• Tink: Flexbox and the keyboard navigation disconnect
• TPG: using the tabindex attribute