3.2.1 - Changes on Focus

Summary

When navigating to an interactive control using the keyboard, it is essential to prevent any unintended actions, changes in focus, or significant content modifications. By following these web accessibility guidelines, you can ensure a seamless user experience without unexpected disruptions.

Requirements

To meet web accessibility standards, user interface elements should not initiate significant changes when receiving keyboard focus. Avoid the following scenarios:

• Automatic loading of new pages
• Form submission
• Moving focus to other elements
• Significantly altering the content on the page

These changes should only occur when explicitly triggered by the user, such as through button activation or link selection.

Common Mistakes

To ensure compliance with accessibility guidelines, avoid the following mistakes:

• Dropdown menus triggering navigation as users navigate options using the 'Tab' or 'Arrow' keys
• Initiating significant changes, such as loading new pages, when users leave form controls
• Focusing an element automatically moves the keyboard focus to another element

Why?

Preventing unexpected actions without notifying screen reader and screen magnifier users is crucial for maintaining a consistent user experience.

Official Wording in the Web Content Accessibility Guidelines

The Web Content Accessibility Guidelines (WCAG) 2.1 define the relevant guideline as follows:

3.2.1 On Focus: When any component receives focus, it does not initiate a change of context. (Level A)

For detailed explanations, techniques, and examples, refer to the W3C's documentation on consistent behavior upon receiving focus.

Guidance for Design

Follow these design recommendations to ensure compliance with web accessibility standards:

• Avoid designing interactions where moving keyboard focus to an element triggers the following actions:
  • Navigating to a new page or reloading the page
  • Submitting a form
  • Moving the keyboard focus elsewhere
  • Making significant content changes on a page

Guidance for Web

To meet web accessibility requirements, ensure that focus or blur events do not cause disorienting actions, such as:

• Navigating to a new page
• Reloading the page
• Submitting a form
• Moving the focus using the HTMLElement.focus() method
• significantly changing the content on a page