An element in focus must be visible on screen
Posted on January 3, 2024
Takeaways
- Most browsers will automatically ensure an element set in focus is visible
- It is the responsibility of the Developers to ensure that this element in focus is visible, no matter if the browser does this by default or not
- It is not acceptable for an element to be in focus, but not visually present on screen
This article is part of a series on user interface micro interactions and how they affect the user experience.
Cet article est également disponible en français.
Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.
— “Understanding SC 2.4.7: Focus Visible (Level AA)”, W3C
The focus indicator component allows users to know where their cursor is located, or with which element they are currently interacting. This article is a corollary to the another article I wrote in which I discussed how to style the focus indicator.
It is not acceptable for an element to be in focus, but not visually present on screen
While it may seem obvious to state that a focus indicator must be visible, my experience shows that designing its style and implementing its functionality are not always done properly. For example, when Developers favour the Single-Page Application (SPA) design pattern, changing screens may mistakenly leave the focus on an element no longer visible on screen.
Most browsers will automatically scroll the browser viewport when an element is set in focus — whether the focus is set because of keyboard navigation, or because it is set by code.
However, it is the responsibility of the Developers to ensure that this element in focus is completely visible, no matter if the browser moves the viewport by default or not.
After all, the point of ensuring that the focus indicator is applied to an element is to ensure it is visible, to actually help the users’ experience, and not simply to tick a checkbox in a compliance list.
References and Additional Readings
Understanding SC 2.4.7: Focus Visible (Level AA) | W3C
Last updated on March 4, 2024