Understanding the CSS :focus-visible Pseudo-class

The :focus-visible pseudo-class in CSS allows developers to style elements that receive focus only if it is appropriate to show a focus indicator. This is particularly useful for improving accessibility, providing visual cues to users navigating your website via keyboard or other non-pointing devices.

What Is the :focus-visible Pseudo-class?

The :focus-visible pseudo-class represents an element that is in focus and needs to be visibly indicated to the user. It is part of the CSS4 Selectors specification and helps to differentiate between focus states that should be shown to the user and those that should not.

Unlike the :focus pseudo-class, which applies whenever an element gains focus (e.g., via mouse click or keyboard navigation), :focus-visible applies only when the user agent determines that focus should be visibly indicated. This typically occurs when the user navigates via keyboard inputs like the Tab key.

Why Use :focus-visible?

The primary purpose of :focus-visible is to prevent unnecessary focus styles from appearing when users interact with the page using a mouse or touch input. It enhances the user experience by showing focus indicators only when appropriate, improving accessibility without compromising aesthetics.

Basic Usage

Here is how you can use the :focus-visible pseudo-class in your CSS:


.button {
    /* Base styles */
    background-color: #007BFF;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}

.button:focus-visible {
    outline: 3px solid #FFD700; /* Gold outline */
}

In this example, the focus indicator (gold outline) will only appear when the button gains focus through keyboard navigation or other non-mouse interactions.

Comparison with :focus

To understand the difference between :focus and :focus-visible, consider the following example:


/* Remove default focus outline */
.button:focus {
    outline: none;
}

/* Provide custom focus indicator */
.button:focus-visible {
    outline: 3px solid #FFD700;
}

By removing the outline in the :focus state and adding a custom style in the :focus-visible state, you ensure that focus indicators are only displayed when appropriate, such as during keyboard navigation.

Practical Example

HTML


<button class="button">Click Me</button>
<a href="#" class="button">Link Button</a>
<input type="text" class="input" placeholder="Enter text">

CSS


.button {
    background-color: #28A745;
    color: white;
    padding: 10px 15px;
    text-decoration: none;
    display: inline-block;
    margin: 5px;
    border-radius: 5px;
}

.button:focus {
    outline: none;
}

.button:focus-visible {
    outline: 3px dashed #FFC107;
}

.input {
    padding: 8px;
    margin: 5px;
}

.input:focus {
    outline: none;
}

.input:focus-visible {
    outline: 2px solid #17A2B8;
}

In this example, the focus styles will only be visible when the user navigates to these elements using the keyboard. Clicking on the elements with a mouse will not display the focus indicators.

Browser Support

The :focus-visible pseudo-class is supported in most modern browsers, including:

Accessibility Considerations

Focus indicators are crucial for users who rely on keyboard navigation or assistive technologies. Removing focus styles without providing an alternative can make your website inaccessible to these users. Using :focus-visible ensures that focus indicators are only hidden when it's safe to do so, preserving accessibility.

Conclusion

The :focus-visible pseudo-class is a valuable tool for enhancing the usability and accessibility of your web applications. It allows you to provide visual focus cues when they are most needed, without cluttering the interface during mouse interactions. By understanding and implementing :focus-visible, you can create more intuitive and accessible user experiences.