Accessibility Checklist: Focus States
Bobby Bailey
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 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.