✅
GOOD Focus
Buttons
</> For developers
button:focus-visible {
outline: 2px solid blue;
outline-offset: 2px;
}
Native
<button> elements are focusable by default. Use :focus-visible for keyboard-only focus styles.
Links
Click this link</> For developers
Link text
Native
<a> elements with href are focusable. Screen readers announce them as "link".
Input
</> For developers
input:focus {
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}
Form inputs get focus automatically. Add visible border/outline change on focus.
❌
BAD Focus
Buttons
</> For developers
/* ❌ NEVER DO THIS */
*:focus {
outline: none !important;
}
NEVER use
outline: none without providing an alternative focus indicator. This is a WCAG 2.4.7 failure.
Links
Click this link</> For developers
/* ❌ Links become invisible */
a:focus {
outline: none;
}
Removing focus styles makes links invisible to keyboard users. Always keep or replace focus indicators.
Input
</> For developers
/* ❌ No visual feedback */
input:focus {
outline: none;
border-color: inherit;
}
No visual change on focus = user has no idea the input is selected. Always show focus state.
The problem
On the BAD side, you can't see which element is focused. This makes keyboard navigation impossible!