On Focus
Success Criterion 3.2.1 (Level A)

Question

In your website/application, does any component initiate a change of context when it receives focus?

Why is this important

It is important that when receiving focus, user interface elements do not initiate a change in focus or activate other elements on the page, because users need the functionality of in-focus elements to be predictable and consistent when navigating through a webpage. This is especially relevant for users with low or no vision, and users with motor impairments that are prevented from using mouse navigation.

Whom does it benefit?

Example 1:

As a person with a motor impairment
I want to be able to navigate through a page using the tab key without activating any user elements
so that I can act on user interface elements in an intentional and predictable way.

Example 2:

As a blind person using a screen reader
I want to be able to focus on components without changing their context
so that I can understand what is on a page without changing the context unintentionally.

What should you do?

When designing a web page with any user interactive elements, make sure that the component can receive focus without being activated. The user should be able to determine where the focus is located on the page but there should be no visual or behavioral modifications to the page content that would move the user to a completely new context.

How do you do it?

  • Use “activate” instead of “focus” to activate user elements.
  • Make sure that links don’t automatically open, forms don’t submit, and no other actions occur when receiving focus.
  • To test, navigate through the website with the keyboard only. If anything moves or causes a change of page, this should be resolved.

Need technical guidance?

Technical guidance is available for implementing this Success Criterion at the Understanding Success Criterion 3.2.1 - On Focus page.

Additional Resources to help you: