How to Create Accessible Focus States for Keyboard and Screen Reader Users

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:

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).

Why This Works:

• The :focus-visible selector only applies styles when necessary, avoiding unnecessary outlines for mouse users.
• The outline property ensures high contrast, improving visibility.
• outline-offset prevents 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:

Bad Example:

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:

Then in CSS:

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 tabindex values greater than 0, 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:

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.