Focusable Controls

Why It Matters

• Many users navigate by keyboard. People with motor disabilities, power users, screen reader users, and anyone with a broken mouse or trackpad rely on keyboard navigation. If controls are not focusable, these users cannot interact with your site.
• Focus is how screen readers discover controls. Screen readers move through a page by focusing on interactive elements. A control that cannot receive focus is invisible to screen reader users — they will never know it exists.
• It is a basic accessibility requirement. Web accessibility standards require that all interactive functionality be operable through a keyboard. Non-focusable controls fail this requirement.
• Native HTML elements are focusable by default. Buttons, links, inputs, and selects are all keyboard-focusable out of the box. Problems arise when developers build custom controls from non-interactive elements like <div> or <span> without adding focusability.

How to Ensure Focusability

1. Use native interactive elements. Whenever possible, use <button>, <a href>, <input>, and <select>. These elements are keyboard-focusable, have built-in roles, and handle Enter/Space key activation automatically.
2. Add tabindex="0" to custom controls. If you must use a <div> or <span> as an interactive element, adding tabindex="0" makes it focusable in the normal tab order.
3. Never use tabindex greater than 0. Positive tabindex values (like tabindex="5") rearrange the focus order and create confusion. Stick with tabindex="0" to follow the natural document order.
4. Add keyboard event handlers to custom controls. Making a <div> focusable is only half the job. You also need to handle keydown events for Enter and Space so the control activates from the keyboard just as it does from a click.
5. Test by tabbing through the entire page. Put your mouse away and navigate your page using only Tab, Shift+Tab, Enter, and Space. If you cannot reach or activate every interactive element, something needs fixing.

Common Mistakes

• Using <div onclick> instead of <button>. A <div> with a click handler is not a button — it is not focusable, not announced as interactive, and does not respond to keyboard activation. Use a real <button>.
• Removing focus outlines with CSS. Setting outline: none on interactive elements makes it impossible for keyboard users to see where focus is. Customize the outline's style if needed, but never remove it entirely.
• Using tabindex="-1" on elements that should be interactive. tabindex="-1" removes an element from the tab order. It has valid uses for managing focus programmatically, but applying it to buttons or links makes them unreachable by keyboard.
• Hidden or off-screen elements remaining focusable. Elements that are visually hidden but still in the DOM can receive focus, confusing keyboard users who tab to an invisible control. Remove hidden elements from the tab order with tabindex="-1" or display: none.