Introduction¶

This document gives information about the related Acquia Optimize checks:

• Element in sequential focus order has visible focus.

What¶

All interactive elements must display a visible indicator, such as a border or background color change, when they receive keyboard focus. This ensures that focused elements are easily distinguishable from surrounding content.

Why¶

For users with mobility impairments who navigate using a keyboard, a visible focus indicator is crucial for ensuring a smooth and effective experience. Without a clear visual marker, it can be challenging to determine which element currently has focus. This leads to frustration and potentially hinders task completion.

Additionally, users with low vision may not be completely blind but often struggle to use a mouse accurately. These users may rely on keyboard navigation for better control and orientation. For them, a visible focus indicator provides an essential visual cue, allowing them to track their position on the page and confidently interact with the intended elements. By ensuring visible focus, you enhance accessibility and usability for a wide range of users who navigate without a mouse.

This check affects the following users who have¶

• Mobility impairments: Who rely on keyboard navigation to interact with web content and need clear visual focus indicators to track their position on the page.
• Low vision: Who benefit from a visible focus indicator to maintain orientation and interact with elements effectively without relying on a mouse.
• Cognitive impairments: Who gain from visual cues like focus indicators to help them understand the navigation flow and maintain context on a webpage.

User story¶

Sandra is 38 years old. At the age of 16, her life took an unexpected turn during a sports accident on the basketball court. While attempting a daring dunk, she landed in an awkward manner, resulting in a spinal cord injury. Unfortunately, this event left her paralyzed from the waist down.

"Alright, so last week I was online, trying to buy some new resistance bands I need for one of my coaching clients. Everything is going fine until I get to the part where I need to choose a delivery spot. Normally, I just say ‘tab, tab’ and it hops around to the next option. But this time? I could not tell where I was. No highlight, no nothing.

Here’s the deal: it is not like it does not matter where my package goes. I am in a wheelchair, so I have to make sure the spot I pick is accessible. The last thing I need is my stuff ending up at some store with stairs and no ramp. But without knowing what option I am on, I am just guessing and hoping for the best.

It is little things like this that remind me these sites were not designed with folks like me in mind. Like, come on; just a simple highlight or some kind of indicator, and we are good. It should not be this hard to pick a delivery spot."

Examples¶

This section gives some examples of the issue.

Example: Map without focus hjighlight for pickup locations¶

An online retailer’s checkout process includes a step where users select a pickup location for their order from a map. The map displays several pins representing available locations, but as the user navigates using the Tab key, no visible focus indicator appears on the map to show which pin is currently selected.

Without a visible focus, users relying solely on keyboard navigation cannot determine which pickup point is currently active. This lack of feedback leads to uncertainty, forcing users to guess or repeatedly cycle through options, potentially causing frustration or incorrect selection.

Example: Map with clear focus highlight for pickup locations¶

An online retailer’s checkout process includes a step where users select a pickup location for their order from a map. The map displays several pins representing available locations, and as the user navigates using the Tab key, a clear focus indicator appears around each pin to show which location is currently selected.

The focus indicator is highly visible, using a distinct border and color contrast to ensure it stands out against the map background. This provides immediate feedback to users relying on keyboard navigation, enabling them to confidently identify their current selection. As a result, users can navigate smoothly and efficiently, reducing the risk of errors and enhancing the overall checkout experience.

How¶

How to review it.

The Acquia Optimize platform will highlight all pages for keyboard review.

Your task is to ensure that all interactive elements on a webpage provide a visible indication of focus when navigated using the keyboard.

Use the Tab key to navigate forward through focusable elements and Shift + Tab to navigate backward. Observe the following:

1. Verify focus visibility:

   • Ensure that as each element receives focus, there is a clear and visible indication such as an outline, underline, or change in color or background.

2. Pay attention to different content types:

   • Interactive elements: Buttons, links, form fields, menus, and other widgets must show visible focus states.

   • Custom components: For elements like custom dropdowns or sliders, check that focus visibility is consistent and clearly perceptible.

3. Look for missing or inadequate focus indicators:

   • Focus should be evident on all focusable elements. If any element does not display a focus indicator it fails this review.

4. Test for consistency across themes and modes:

   • Check focus visibility under different themes (light/dark modes) or high-contrast settings, ensuring it remains discernible.

If all focusable elements meet the criteria above, you can mark the webpage as "Reviewed."

For instructions, see the user guide article:

How to review an accessibility issue.

Additional information¶

WCAG success criteria¶

2.4.7 Focus Visible

ACT rules¶

Related accessibility conformance testing rules.

Element in sequential focus order has visible focus