Skip to main content

6. Visible Focus and Logical Order

Requirement

The browser focus indicator is visible and distinguishable when navigating all interactive elements with the keyboard. Focus moves in a logical sequence through interactive elements.

Evaluation Process

Using the keyboard alone, use the tab key to navigate through all the actionable elements on the page. Important principles include:

  1. Visible Focus: Every actionable element receives focus with a clearly visible focus indicator.
  2. Non-Actionable Elements: Focus should not be moved to elements that do not perform an action.
  3. Logical Order: The order is logical, generally moving from the top left of a page to the bottom of the page.
  4. No Traps: The keyboard focus does not get stuck anywhere on the page.
Stanford Homepage with Academics tab in focus.
The "academics" tab in focus on the Stanford homepage. The focus of these elements moves from left to right and from top to bottom, which makes sense.

Scoring Guide

  • Pass: The focus order is logical, and only actionable elements receive focus.
  • Partial Fail: The focus order is mostly logical, and focus does not land on hidden elements.
  • Fail: The focus order jumps around, lands on hidden elements, or actionable elements do not show keyboard focus. If there are any keyboard traps this is also a fail.
  • Not Applicable / Unknown: These should not be used.

More Information

More information about focus order is available here:

Relevant WCAG Information

Last modified