Why Focus States Are Essential for Accessibility
Focus states help keyboard users and assistive technology navigate websites. Without visible focus indicators, people may struggle to interact with content. Use this checklist to ensure focus states are properly implemented.
10-Point Focus State Checklist
Number One: Every interactive element is focusable
Buttons, links, and form fields receive keyboard focus. Avoid hiding focusable elements using display: none; or visibility: hidden;.
Number Two: Custom focus indicators are visible
Do not rely on browser defaults; ensure high visibility. Maintain at least a 3:1 contrast ratio between the focus indicator and the background.
Number Three: Focus follows a logical order
Navigation moves left-to-right, top-to-bottom in a predictable sequence. Use Tab and Shift + Tab to confirm the correct order.
Number Four: No focus trapping
People must be able to exit modals, popups, and widgets using Esc. When a modal closes, focus should return to the triggering element.
Number Five: Do not remove focus outlines
Never use outline: none; unless replaced with an accessible alternative. Use border, box-shadow, or background changes instead to ensure visibility.
Number Six: Focus is visible across browsers
Test focus styles in Chrome, Firefox, Safari, and Edge. Ensure custom focus indicators appear consistently across different browsers.
Number Seven: Focus remains on elements when expected
When content updates dynamically, ensure focus remains on an appropriate element. After closing a modal, return focus to the original button or link.
Number Eight: Dropdowns and popups support keyboard interaction
Ensure arrow keys, Enter, and Esc work as expected. Avoid requiring a mouse for navigation within dropdowns and popups.
Number Nine: Use tabindex carefully
Avoid unnecessary tabindex="0" on non-interactive elements. Do not use tabindex="-1" unless intentionally removing focus from an element.
Number Ten: Test with only a keyboard
Unplug your mouse and navigate using only the keyboard. If you cannot tell where you are, neither can keyboard users.
Support my work in accessibility
Creating accessible content takes time, care, and deep testing — and I love every minute of it. From writing blog posts to doing live audits and building checklists, everything I create is designed to make the digital world more inclusive.If something here helped you — whether it saved you time, taught you something new, or gave you insight into accessibility — consider supporting my work.
You can buy me a coffee to help keep this platform going strong:
Buy Me a Coffee
Every coffee goes toward:
- Creating new articles with accessibility tips, tools, and testing methods
- Covering hosting, software, and assistive tech costs
- Supporting free education for designers, developers, and testers
- Making a meaningful difference for people living with disabilities
Thanks for being part of this mission to build a more accessible web — one page at a time.