An element in focus must be visible on screen

Posted on January 3, 2024

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

The focused element cannot be fully obscured – A guide to designing accessible, WCAG-compliant focus indicators | Sara Soueidan

Understanding SC 2.4.7: Focus Visible (Level AA) | W3C

WCAG 2.2 Focus Not Obscured — another candidate for the latest WCAG standards | Daniel Berryhill – UX Collective

Last updated on March 4, 2024