Interaction

Focus indicator

Also known as: Focus ring, focus outline

A focus indicator is the visible outline that shows which element the keyboard is currently on, so keyboard users can see where they are.

In plain terms

As you press Tab, focus jumps from link to button to field. The focus indicator — usually an outline or ring — marks the current spot. A common mistake is removing it with CSS (outline: none) because designers think it looks untidy, which leaves keyboard users completely lost.

Why it matters

Without a visible focus indicator, a keyboard user is navigating blind — they can't tell what they're about to click. WCAG 2.4.7 requires it, and 2.2 added rules that it also can't be hidden behind sticky headers.

Example

Instead of deleting the outline, style it: a 2px ring in your brand colour with enough contrast keeps it on-brand and usable.

Related terms

Want your website checked against every WCAG requirement, not just the jargon? We run IAAP-certified audits with plain-English reports.

Request an Audit