In accessibility-focused CSS, which selector helps reveal focus outlines only for keyboard users and keeps focus indicators clear?

In accessibility-focused CSS, which selector helps reveal focus outlines only for keyboard users and keeps focus indicators clear?

• A. Use the :focus-visible pseudo-class to show focus only for keyboard users and provide clear focus indicators.
• B. Apply :focus to all focus states and always show outlines.
• C. Hide focus outlines to avoid visual clutter on mouse interaction.
• D. Rely on :hover to indicate focus for all inputs.

Answer: (A)

The selector :focus-visible is designed to reveal focus outlines only when the user is navigating with a keyboard, keeping those indicators clear for keyboard users while avoiding visual clutter for mouse users. When you tab through a page, the browser treats that as keyboard modality and applies the focus style; clicking with a mouse, on the other hand, typically won’t show the focus outline. This balances accessibility with clean visuals. You’d style it like: button:focus-visible { outline: 2px solid #2563eb; } If the browser doesn’t support it, you can still provide a reasonable fallback, but the key idea is to rely on :focus-visible so the focus ring appears for keyboard users and stays hidden during mouse interaction. The other approaches either show outlines all the time, hide them entirely, or use hover—which doesn’t address keyboard accessibility.

The selector :focus-visible is designed to reveal focus outlines only when the user is navigating with a keyboard, keeping those indicators clear for keyboard users while avoiding visual clutter for mouse users. When you tab through a page, the browser treats that as keyboard modality and applies the focus style; clicking with a mouse, on the other hand, typically won’t show the focus outline. This balances accessibility with clean visuals. You’d style it like: button:focus-visible { outline: 2px solid #2563eb; } If the browser doesn’t support it, you can still provide a reasonable fallback, but the key idea is to rely on :focus-visible so the focus ring appears for keyboard users and stays hidden during mouse interaction. The other approaches either show outlines all the time, hide them entirely, or use hover—which doesn’t address keyboard accessibility.