Visible focus shows keyboard users which control will receive an action. Focus-visible can distinguish interactions while retaining an accessible indication.
Before you start
You should be comfortable with semantic HTML, CSS selectors and browser developer tools. Reproduce the scenario in a small page before adding framework code. Inspect both visual appearance and keyboard or accessibility behavior; a correct screenshot alone is not sufficient evidence.
The practical goal is to reason through this situation: A button uses a high-contrast outline when keyboard focus is visible. Read the walkthrough first, then try the interview exercise before opening its answer. The important part is explaining the decision and its consequences, rather than remembering a definition alone.
Step-by-step walkthrough
Step 1: Identify focusable controls
Use native interactive elements and follow keyboard navigation order through the actual page.
Step 2: Provide a visible indicator
Choose sufficient contrast and a shape that remains apparent against both component and surrounding backgrounds.
Step 3: Check clipping and themes
Outlines can be hidden by overflow or blend into another theme. Inspect the full context, not an isolated button.
Worked scenario
A button uses a high-contrast outline when keyboard focus is visible.
button:focus-visible, a:focus-visible {
outline: 3px solid currentColor;
outline-offset: 3px;
}CurrentColor must have adequate contrast in the real design. This preserves a keyboard indicator without relying only on a subtle color shift; visual design should still verify thickness, contrast and surrounding spacing.
Common mistake
Removing outlines without a replacement hides navigation state.
Verify the behavior
Tab and Shift+Tab in light and dark themes. Check every control, including ones inside scrolling or clipped containers.
Interview exercise
Verify a custom focus style.
Answer and reasoning
Tab through the page in different themes and ensure the indicator remains visible against nearby colors and clipping boundaries.
Continue learning
Compare the scenario with the HTML and CSS interview questions and test your understanding with the HTML and CSS MCQs. For terminology and implementation details, consult the reference material.