missing-focus-indication

Keyboard users and many people with low vision depend on a visible focus indicator to know which interactive element is currently active. Without it, they can lose track of their position and be unable to operate links, buttons, or form controls. If your styles remove or hide the browser's default focus indicator, provide a clear custom indicator that stays visible and is not obscured by other content. A focus indicator that is present but too faint is a separate issue, covered by the related low-focus-contrast validation.

Pass Patterns

Default browser focus indicator

No CSS removes the outline, so every interactive element keeps the browser's focus indicator.

<a href="/products">View products</a>
<button type="submit">Submit</button>

Custom indicator with :focus-visible

The button defines a strong custom focus indicator instead of removing it.

<button class="primary-action">Continue</button>


<style>
    .primary-action:focus-visible {
        outline: 3px solid #000;
        outline-offset: 3px;
    }
</style>

Fail Patterns

Focus indicator removed with outline: none

The CSS removes the outline on focus and adds nothing in its place, so a keyboard user cannot see when the button is focused.

<button class="icon-button">
    <span aria-hidden="true">search</span>
    <span class="sr-only">Search</span>
</button>


<style>
    .icon-button:focus { outline: none; }
</style>

WCAG techniques

Sufficient techniques

• G149: Using user interface components that are highlighted by the user agent when they receive focus
• G195: Using an author-supplied, visible focus indicator
• C45: Using CSS :focus-visible to provide keyboard focus indication
• C40: Creating a two-color focus indicator to ensure sufficient contrast with all components

Failure techniques

• F55: Failure of Success Criteria 2.1.1, 2.4.7, 2.4.13, and 3.2.1 due to using script to remove focus when focus is received
• F78: Failure of Success Criterion 1.4.11, 2.4.7 and 2.4.13 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator

ACT Rules

• Element in sequential focus order has visible focus

Try It Yourself

Using a keyboard

1. Open the page in a browser.
2. Use the Tab key to move through links, buttons, and form fields.
3. Use Shift+Tab to move backwards through the same elements.
4. Watch whether each focused element shows a clear visual indicator.

Expected results: Every interactive element shows a visible focus indicator when it receives keyboard focus, from the browser or from custom CSS.

Actual results: Some elements receive focus but show no visible change.

FAQ

Standards and Regulations

Personas impacted by this issue

• Keyboard
• Low Vision
• Switch Access

Related Issues

• low-focus-contrast
• keyboard-accessible
• interactable-role