Visible Focus Indicator

A keyboard-focused element must have a clearly visible visual indicator so users can tell where keyboard input will go. The indicator must remain visible and must not be hidden by styles or other content.

When a user navigates a page with a keyboard, the browser tracks which interactive element currently has focus. A visible focus indicator makes that state apparent, allowing users to understand where their next action will occur.

Browsers commonly provide a default focus outline, but developers can replace it with a custom style when the replacement remains clearly visible. CSS such as `outline: none` or `outline: 0` should not be used without providing another effective focus treatment.

A focus indicator should have sufficient visual distinction from the surrounding interface. It should remain visible against the element's background and nearby content, including when the element receives focus through keyboard navigation.

The focus treatment applies to interactive controls such as links, buttons, form fields, and other keyboard-focusable elements. It is especially important to test actual keyboard navigation rather than relying only on mouse interaction.

Key points

• Keep keyboard focus visually apparent on interactive elements.
• Do not remove the browser focus outline unless an accessible replacement is provided.
• Make the focus treatment clearly distinguishable from surrounding content.
• Test focus states with keyboard navigation, especially using the Tab key.

Interview questions

Why is a visible focus indicator important for keyboard accessibility?

Keyboard users need to know which control currently has focus. Without a visible indicator, they can lose track of where actions such as Enter or Space will apply. A clear focus treatment provides the visual equivalent of knowing where the keyboard cursor is.

What is wrong with using `outline: none` on buttons and links?

It can remove the browser's visible indication of keyboard focus. That makes keyboard navigation difficult or impossible to follow visually. If the default outline is replaced, the replacement should provide a clear, visible focus treatment.

How would you implement a custom focus indicator?

I would style the focused state with a clearly distinguishable outline or another visible treatment. For keyboard-oriented behavior, I would commonly use `:focus-visible` so the indicator is presented when the browser determines that it is useful. I would also test the result against different backgrounds and at different zoom levels.

How would you test a web application's focus indicators?

I would navigate the interface using only the keyboard, primarily with Tab and Shift+Tab, and observe whether every relevant interactive control has an obvious focus state. I would check dialogs, menus, forms, custom controls, and dynamically displayed content. I would also verify that the indicator is not clipped, obscured, or indistinguishable from the surrounding design.