on-focus

An element receiving focus must not trigger actions such as location change, the page structure, or the state of the focused element.

Who might be affected
Low Vision
Cognitive
Keyboard

Description

The focus state is a visual cue that shows an element is ready for user interaction. When gaining focus automatically causes a "change of context", such as navigating to a new page, opening a modal, or submitting a form, it makes the interface unpredictable. This can disorient users who rely on keyboard navigation, screen readers, or have cognitive disabilities. Such unexpected behaviors may make the interface difficult to understand and use.

Quick Fixes

Ensure that significant changes to the interface (like the ones detailed above) only occur when the user actively triggers them, for example, by pressing a button or a key like Enter or Space. They must never be the result of an element simply receiving focus.

Fail Patterns

1. Modal opens on focus

Two screenshots of a fictitious travel app that allows booking flights to space. The first screen shows the page before the "Guests" fields is in focus, the second screen shows the "Guests" field in focus and a modal open over the screen. Users can add the number of guests from within the modal.

2. Checkbox being checked on focus

Two screenshots of the same app screen. The screen has a heading saying "Selectable List", and under it a heading that's saying "Select your favorite fruite" and it has an unchecked checkbox under it with the label "Apple" The first screen shows the page before the "Apple" checkbox is in focus, the second screen shows the "Apple" checkbox in focus and it is checked.

Elements must not update their state as the result of receiving focus.

How Users Are Affected

Unpredictable behavior caused by element receiving focus may disorient keyboard-only users and screen reader users, who rely on a consistent, predictable flow to navigate. It is especially problematic for users with cognitive disabilities, who may become confused or lose their place, as well as for users with motor disabilities who may struggle to correct an accidental action or navigate out of an unexpected situation.

WCAG Success criteria

This issue might cause elements to fail one or more of the following Success criteria:
3.2.1 On Focus (A)