Understanding focus indicators for web accessibility

Focus indicators are visual markers (typically a highlighted outline) that show which element is currently selected when a user navigates a page using a keyboard instead of a mouse. Visible, high-contrast focus indicators are required under WCAG 2.1 Level AA for ADA Title II compliance.

A focus indicator is a visual marker that shows which element on a webpage is currently selected. For users who navigate with a keyboard instead of a mouse, this indicator acts as a GPS to show exactly where they are on the screen.

This article will help you understand how focus indicators work in keyboard navigation.

In this article

• Why focus visibility matters
• Essential elements requiring focus
• Focus indicators by browser 
• FAQs 

Why focus visibility matters

Focus indicators are more than a technical requirement; they are a critical accessibility feature that ensures your site is usable for everyone. Providing a clear visual "path" is essential for:

• Keyboard navigation: Many users with limited mobility use the Tab key, mouth sticks, or switch devices instead of a mouse. The indicator allows them to see exactly where they are within menus and buttons.

• Assistive technology: Screen readers follow the page focus. A visual outline ensures the element being announced matches what is being highlighted on the screen for those with low vision.

• Cognitive support: High-contrast outlines help users with attention or memory limitations maintain their place on the page without extra mental effort.

• Power users: Web developers and data-entry workers rely on focus indicators to navigate complex forms quickly and accurately.

• Legal compliance: The 2026 ADA mandate, WCAG 2.1 Level AA requires that any keyboard-operable interface has a visible focus state.

Essential elements requiring focus

A good rule of thumb: If a user can click it with a mouse, they must be able to see it with a keyboard. The following elements must always display a visible focus state:

• Navigation: Menu items, dropdowns, and "skip to content" links.
• Actions: Buttons, CTA links, and icon triggers.
• Inputs: Text fields, checkboxes, radio buttons, and select menus.
• Interactions: Tooltips triggered by hover/focus, and slider controls (like gallery arrows).

Focus indicators by browser 

The appearance of a focus indicator depends on the web browser being used. Most browsers have built-in default styles. 

FAQs 

Q: Why are there outlines around different elements on my site? 
A: These outlines are called focus indicators. A focus indicator is a visual marker that shows which interactive element (form, button, etc.) on a webpage is currently being focused on. The focus indicator helps users who navigate the web with a keyboard see where they are tabbing on the screen.

Q: Why would someone use a keyboard instead of a mouse? 
A: There are multiple reasons someone would use a keyboard for navigation. Some common types of keyboard-only users include:

• People who use screen readers: Many users have impaired vision or other cognitive disabilities and use screen readers to help them understand the content. Screen readers are typically controlled exclusively using the keyboard.

• People with limited mobility: Some visitors struggle with fine-motor control, making it difficult to use a mouse. They may use assistive technology devices, such as a mouth stick, to operate a standard keyboard.

• Power users: Users who enter large amounts of information, such as data entry workers, use tabbing to save time and reduce movement off the keyboard.

Q: What parts of my site will have the focus indicator? 
A: Several areas of your site require a focus indicator. A good rule of thumb is that if you can interact with the element with a mouse, it needs a focus indicator. Common elements include:

• Links and Buttons

• Form fields and controls (text fields, search fields, select boxes, radio buttons, etc.)

• Menu items and navigation dropdowns

• Elements triggered by hover, such as additional text or tooltips

• Navigational elements, such as arrows or circles to advance a slideshow

Q: What do focus indicators look like? 
A: The appearance of a focus indicator depends on the web browser being used. Most browsers have built-in default styles:

Chrome

• Link focus, buttons, and form fields all use a light blue outline.

Firefox

• Link focus is a dotted outline the same color as the link.
• Buttons have a blue outline and a smaller dotted outline around the button label.
• Form fields have 1px blue outlines.

Safari 

• Uses a distinct, soft blue glowing halo that wraps around the edges of the focused element.
• Applies a more pronounced glow to text inputs and search bars to clearly indicate the typing area.
• Sits tightly against the border of the button or link rather than adding a "halo" with extra space.

Legacy Internet Explorer

• Link focus is a simple dark gray dotted outline.
• Buttons have a dotted outline around the text.
• Form fields are slightly more black than the standard dark gray.