Focus is one of the most critical elements in web accessibility—yet, unfortunately, it's also one of the most overlooked. Focus is a state in which a user zeroes in on a particular element in the interface, without taking any additional action. In terms of behavior, it's similar to the "hover" state with a mouse—but focus is primarily activated via keyboard or assistive technologies, not with a cursor.
Focus is critical for people who don't use a mouse—for example, users with motor impairments, keyboard-only users, and of course, users who are blind or have low vision and rely on screen readers.
Which elements should receive focus?
Any element that is interactive—meaning it requires user action, response, or decision—must be accessible via keyboard and therefore must receive proper and clear focus.
Elements that must receive focus:
- Links (<a href="...">)
- Buttons (<button>, <input type="submit">, and the like)
- Form fields
- Labels when they have special behavior
- Custom elements that behave like buttons or menus (for example, <div role="button">)
- Modals, dialogs, tabs, combo boxes, etc.—any component that opens, closes, or affects the display in real time.
- Dynamic alert regions that users need to interact with.
- Clickable icons or action buttons, such as filter buttons, menu toggles, "Add to Cart," "Show More," etc.
- Links within galleries, carousels, sliders, and the like—anything used to navigate between content.
If an element doesn't receive focus by default (like <div> or <span>) but serves a functional purpose, add tabindex="0" to it and ensure it has a defined role and a visible focus response.
Which elements should not receive focus?
There are elements that have no reason or need to be in the focus order—doing so would burden users, confuse screen readers, and make keyboard navigation harder.
- Headings (<h1>–<h6>)—unless they have clickable behavior.
- Paragraphs (<p>) and plain text.
- Decorative characters alone—such as a graphic icon with no functional meaning.
- Non-clickable images.
- Static labels like <label> or <legend>—unless they have an associated interactive element.
- Purely decorative components—like backgrounds, dividers, borders, or non-interactive content areas.
- Empty links or <a> tags without href—these should never be used in the first place.
Important tip:
Avoid adding tabindex="0" to elements solely to make them "visually accessible"—if an element doesn't serve a functional purpose, it shouldn't be focusable.
Adding focus to additional elements
If you want to make an element that doesn't receive focus by default (like a <div> or <span>) keyboard accessible, use this attribute:
tabindex="0"
This attribute adds the element to the natural tab order for focus traversal.
Conversely, if you want to prevent an element from receiving focus, add:
tabindex="-1"
This approach is especially useful for temporary elements, system messages, or when you don't want to disrupt the navigation sequence.
Custom focus order
When you add tabindex with a value greater than 0 (for example: tabindex="1", tabindex="2", etc.)—you establish a custom focus order based on priority. Using this technique can create a confusing user experience if not done carefully. Therefore, the recommendation is to use it only when there's a clear need, not as a rule.
Focus styling—mandatory, not optional
Visually, when an element is in focus, it must be distinctly differentiated. The browser default is to display a focus outline, usually in blue.
It's extremely important not to remove focus using CSS. If you do choose to remove the outline—you must provide a clear visual alternative that lets users know where they are.
For example:
a:focus {
outline: 3px dotted #00FF00;
}
Removing the outline entirely without an alternative is an accessibility standards violation and makes navigation extremely difficult for keyboard-only users.
In summary
Focus is a vital tool for accessibility, proper navigation, and equitable user experience. Don't underestimate it. Ensure every interactive element is accessible via keyboard, and highlight it clearly when it's in focus. This way you'll guarantee comfortable and safe use for all users—without exception.