The WCAG Explained

Simplified and actionable explanations of every WCAG 2.2 criteria

Focus Order

Summary:
WCAG 2.4.3, "Focus Order," is about ensuring that when users navigate through a website or app using a keyboard, the focus order is logical and intuitive. This is especially important for users who rely on keyboard navigation, including those with visual impairments or motor disabilities.

What:
The guideline requires that when a user navigates through a page using sequential keyboard inputs (like the Tab key), the order in which interactive elements receive focus should be consistent with the visual layout. This means the focus should move in a way that makes sense, reflecting the logical flow of content.

Why:
For users who can't rely on a mouse and instead use a keyboard or other assistive technologies, the focus order is how they understand the layout and flow of a page. A logical focus order aligns with the way content is presented visually, helping these users interact with the content more effectively and understand its organization.

Examples and Scenarios:

  1. Forms: In online forms, the focus should move logically from one field to the next in the order they are intended to be filled.
  2. Navigation Menus: In a top-down menu, the focus order should move from left to right, reflecting the visual order of the menu items.
  3. Modal Dialogs: When a modal dialog opens, the focus should move directly to it, and then proceed through its elements in a logical sequence.

How to Comply:

  • Websites: Ensure the HTML structure reflects the visual layout. Use proper tab indexing and avoid using CSS to visually reposition elements in a way that contradicts the logical flow.
  • Mobile Apps: Design the navigation flow to respect the visual layout and logical sequencing of elements.
  • Software Applications: Test the application with keyboard-only navigation to ensure that the focus order is intuitive and follows the visual layout.

Exceptions:

  • Complex Interfaces: In certain complex interfaces where the content is not presented linearly (like a web-based game or interactive tool), maintaining a traditional focus order might not be feasible. However, the focus order should still be as logical as possible within the context of the interface.