What Focus indicator means
Keyboard and assistive technology users rely on it to know where they are on the page. Removing focus outlines without a clear replacement is a common accessibility failure.
Why it matters for your website
People who use a keyboard instead of a mouse rely on the focus outline to know where they are on the page. Without it, they cannot fill out your forms or click your buttons. A visible focus indicator is part of accessibility guidelines like WCAG and helps you avoid shutting out customers.
Example
On a florist's checkout page, a keyboard user tabs to the Place Order button and sees a thick blue outline, so she knows exactly what pressing Enter will do.
Tips
- Test your site by pressing Tab through every page.
- Style focus outlines to match your brand but keep strong contrast.
- Use the focus-visible CSS selector to show outlines for keyboard users.
Common mistakes
- Removing outlines with outline none for looks and not adding a replacement.
- Making the focus style so faint it blends into the background.
Questions about Focus indicator
What is Focus indicator?
The visible outline that shows which link, button or field is selected when someone uses a keyboard.
Why do buttons on my site show a box when clicked?
That is often the browser's focus indicator. Instead of removing it, use focus-visible styles so it shows mainly for keyboard users.
Is a focus indicator required by law?
Laws like the ADA do not name specific design features, but WCAG, which is often used as the standard, requires visible keyboard focus.
