Focus Indicator – Visible Keyboard Navigation for Better Accessibility
A focus indicator is a visual outline or highlight that shows which interactive element currently has keyboard focus. This is essential for users navigating via keyboard only (e.g., using Tab, Enter, arrow keys) and is a core requirement of WCAG 2.1 – Success Criterion 2.4.7: Focus Visible.
Without a visible focus indicator, users may lose orientation on the page.
Common Focus Indicator Elements
| Element | Default Style | |
|---|---|---|
| <button> | Black or blue outline | Enhance contrast with :focus-visible |
| <a> | Browser-specific outline | Style consistently across elements |
| <input> | Inner border or shadow | Ensure visible outline on focus |
Best Practices
- Never use outline: none unless you provide an accessible alternative
- Use :focus-visible to show indicators only for keyboard navigation
- Ensure indicators are clearly visible and high contrast (min. 3:1 ratio)
- All interactive elements must be focusable and visually identifiable
- Keep the style consistent across the site for better usability
Example CSS for Custom Focus Indicators
button:focus-visible,
a:focus-visible {
outline: 3px solid #ff9900;
outline-offset: 2px;
}You can find out more about our services in the area of digital accessibility here.
