Web accessibility is not just about compliance—it is about inclusion. Users who rely on keyboard navigation and screen readers need clear, visible focus indicators to move through a website efficiently.
Unfortunately, many websites neglect focus states, making navigation frustrating or impossible for users who cannot use a mouse.
Let’s explore why focus states matter, what makes them effective, and how to implement them with CSS and JavaScript.
Why Focus States Matter in Web Accessibility
A focus state highlights the currently selected element when users navigate via keyboard (Tab key) or assistive technologies. Without proper focus styles:
- Users lose track of where they are, making interaction difficult.
- Form fields, buttons, and links become inaccessible to non-mouse users.
- Websites fail WCAG (Web Content Accessibility Guidelines) compliance, limiting usability.
A well-designed focus state guides users visually and ensures smooth navigation—without sacrificing aesthetics.
Best Practices for Accessible Focus Styles
1. Use the :focus-visible Pseudo-Class for Better UX
By default, browsers apply a focus outline to elements, but many developers remove it entirely with:
*:focus {
outline: none;
}
This destroys accessibility for keyboard users. Instead, use :focus-visible, which only shows focus indicators when needed (like when using the Tab key, but not when clicking with a mouse).
button:focus-visible,
a:focus-visible,
input:focus-visible {
outline: 3px solid #005fcc;
outline-offset: 2px;
border-radius: 4px;
}
Why This Works:
- The
:focus-visibleselector only applies styles when necessary, avoiding unnecessary outlines for mouse users. - The
outlineproperty ensures high contrast, improving visibility. outline-offsetprevents overlap with content.
2. Ensure Sufficient Contrast for Visibility
Focus states must meet WCAG contrast requirements. A faint or low-contrast outline can be difficult to see, especially for users with visual impairments.
Good Example:
a:focus-visible {
outline: 3px dashed #ff9900; /* High contrast */
}
Bad Example:
a:focus-visible {
outline: 1px solid lightgray; /* Low contrast, hard to see */
}
For the best experience, use bold colors that contrast well against your background.
3. Add a Keyboard-Only Focus Indicator with JavaScript
If you want to show focus only when using the keyboard, you can add a class dynamically.
JavaScript Solution:
document.body.addEventListener("keydown", function(e) {
if (e.key === "Tab") {
document.body.classList.add("user-is-tabbing");
}
});
Then in CSS:
.user-is-tabbing button:focus,
.user-is-tabbing a:focus {
outline: 3px solid #00aaff;
}
Why This Works:
- Prevents unnecessary focus outlines for mouse users.
- Improves keyboard navigation without disrupting design.
4. Ensure Focus Order is Logical
Screen reader and keyboard users navigate sequentially through a webpage. If focus jumps around unpredictably, users get lost.
How to Fix Focus Order Issues:
- Use a logical HTML structure—screen readers follow the document flow.
- Avoid
tabindexvalues greater than0, as they can disrupt expected navigation order. - Ensure modal dialogs, dropdowns, and overlays trap focus (users should not be able to tab out of an open modal).
Example of trapping focus in a modal:
document.addEventListener("keydown", function(e) {
if (e.key === "Tab" && modalIsOpen) {
keepFocusInsideModal(e);
}
});
5. Test with a Keyboard and Screen Reader
After implementing focus styles, test your website without a mouse to ensure smooth navigation.
Keyboard Testing Checklist:
✔ Press Tab—does the focus move logically?
✔ Can you see the focus outline clearly on every interactive element?
✔ Does pressing Enter activate buttons and links as expected?
✔ Can you navigate out of and back into modals or dropdowns without issues?
Screen Reader Testing:
- Use NVDA (Windows) or VoiceOver (Mac) to check how focus is announced.
- Ensure focus states are visually and audibly recognizable.
Final Thoughts: Focus is Not an Afterthought
A well-implemented focus state ensures seamless navigation for all users, making your website more inclusive.
By using :focus-visible, maintaining strong contrast, and testing with assistive technologies, you create an experience that is both functional and accessible.
Not sure if your site meets accessibility standards? Try navigating without a mouse—and see what your users experience.
