by Mat Janson Blanchet

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.


“Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.”

— W3C, “Understanding SC 2.4.7: Focus Visible (Level AA)”

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 February 13, 2024


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.