HTML & CSS Interview Question #134

What is focus-visible and why is it useful?

Advanced CSS, Accessibility, Performance, Debugging & Senior Scenarios Senior Advanced

Quick Interview Answer

:focus-visible matches when an element has focus and the browser determines that a visible focus indicator is appropriate, such as during keyboard navigation. It helps provide strong keyboard focus without necessarily showing the same custom ring for every pointer click.

Detailed Explanation

:focus-visible matches when an element has focus and the browser determines that a visible focus indicator is appropriate, such as during keyboard navigation. It helps provide strong keyboard focus without necessarily showing the same custom ring for every pointer click.

Developers should never remove focus outlines without providing an effective replacement. Keyboard users need a clear indication of which interactive element currently has focus.

Code Example

.button:focus {
    outline: none;
}

.button:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 3px;
}