Focus visible indicators

How to apply it

1. 1

   Replace outline: none with focus-visible:ring-2 ring-blue-500 in the same rule, never on its own.

2. 2

   Keep the ring at 2px or thicker and give it an offset, so it stays readable over a filled background.

3. 3

   Measure the ring against both the control and the surface behind it: WCAG 1.4.11 asks for 3:1.

4. 4

   Tab through every flow to confirm the ring never disappears behind an overflow: hidden container.

Why it works

The default focus ring is browser chrome, and outline: none removes it with nothing standing in its place; for a keyboard user that is the equivalent of hiding the cursor. focus-visible is the browser's own heuristic for when a ring is wanted: it fires for Tab and keyboard activation and stays quiet for a mouse press, so focus-visible:ring-2 ring-blue-500 puts the marker exactly where WCAG 2.4.7 needs it without ringing every click.

What breaks

A keyboard user tabs into a delete dialog and nothing on screen moves, so they cannot tell whether focus is sitting on Cancel or on Delete, and pressing Enter becomes a coin flip.

Review questions

1. 1

   Does tabbing show a visible ring on every element that takes focus?

2. 2

   Is outline: none ever applied without a replacement in the same rule?

3. 3

   Does a mouse click stay ring-free while Tab shows the ring?