Bootstrap - Bootstrap Focus Ring Utilities

Bootstrap Focus Ring Utilities are used to control and customize the visual outline that appears around an element when it receives keyboard focus. They are particularly useful for improving accessibility and making interactive elements easier to identify when users navigate a webpage using a keyboard.

What Is a Focus Ring?

A focus ring is a visual indicator that shows which interactive element is currently selected or focused. For example, when a user presses the Tab key to move through buttons, links, or form controls, the browser normally displays an outline around the focused element.

Without a visible focus indicator, keyboard users may have difficulty knowing where they are on a webpage. Bootstrap provides the focus-ring utility to make this indicator easier to customize without writing extensive custom CSS.

Basic Usage

Bootstrap provides the .focus-ring class for applying a focus ring to an element.

<a href="#" class="focus-ring">
    Focus on this link
</a>

When the element receives focus, Bootstrap applies a visible focus ring around it.

The focus ring is particularly useful for interactive elements such as:

  • Links

  • Buttons

  • Form controls

  • Navigation elements

  • Custom interactive components

Changing the Focus Ring Color

Bootstrap allows developers to customize the color of a focus ring using Bootstrap's focus-ring color utilities.

For example:

<button class="focus-ring focus-ring-primary">
    Primary Focus
</button>

Another example can use a different contextual color:

<button class="focus-ring focus-ring-danger">
    Danger Focus
</button>

The exact available utilities depend on the Bootstrap version being used.

Why Focus Rings Are Important

Focus indicators are an important part of accessible web design. Many users navigate websites without a mouse. Keyboard users commonly use the Tab key to move from one interactive element to another and the Enter or Space key to activate controls.

A clearly visible focus ring allows these users to identify the currently focused element.

For example, consider a page containing:

<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>

When a keyboard user presses Tab, the focus moves between these links. A visible focus ring helps the user determine which link is currently selected.

Focus Ring and Mouse Users

Focus indicators are not only relevant to keyboard users. Some users may interact with websites using alternative input devices or accessibility technologies. Maintaining a clear focus state therefore improves the general usability of an interface.

Developers should avoid completely removing focus outlines unless an equally clear alternative focus indicator is provided.

For example, this CSS can create an accessibility problem:

button:focus {
    outline: none;
}

Removing the outline without providing another visual indication makes it difficult for keyboard users to determine which button is focused.

Using Focus Ring with Buttons

Focus rings can be applied to Bootstrap buttons to provide a customized focus state.

<button type="button" class="btn btn-primary focus-ring">
    Submit
</button>

The button retains its normal Bootstrap button styling while the focus-ring utility provides an additional focus indication.

Using Focus Ring with Links

Focus rings can also be used with links.

<a href="about.html" class="focus-ring">
    Learn More
</a>

When the link receives keyboard focus, the focus ring makes its focused state easier to identify.

Customizing Focus Ring Properties

Bootstrap's focus-ring utilities are based on CSS custom properties. This makes it possible to modify aspects of the focus ring without creating a completely new component.

A developer can customize properties such as the focus-ring color or opacity according to the design requirements.

For example:

<div class="focus-ring" style="--bs-focus-ring-color: rgba(13, 110, 253, .25);">
    Focusable Content
</div>

This approach can be useful when a website has a particular visual design that requires a customized focus color.

Focus Ring Versus CSS Outline

Traditional CSS often uses the outline property for focus indicators:

button:focus {
    outline: 2px solid blue;
}

Bootstrap's .focus-ring utility provides a more convenient framework-based approach.

Instead of creating separate CSS rules for different components, developers can use Bootstrap's utility classes and customize the relevant CSS variables when necessary.

This is especially helpful in larger applications where consistent focus styling is required across multiple interactive elements.

Accessibility Considerations

A focus ring should have sufficient visual contrast against the surrounding interface. A very faint focus indicator may technically exist but still be difficult for users to see.

When designing focus states, developers should consider:

  1. The contrast between the focus ring and the background.

  2. Whether the focus indicator remains visible on different component colors.

  3. Whether keyboard users can easily identify the focused element.

  4. Whether custom styling accidentally removes the default focus indication.

  5. Whether the focus indicator remains visible in different themes and responsive layouts.

Example

The following example demonstrates a Bootstrap button with a focus ring:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Focus Ring</title>

    <link
        href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        rel="stylesheet">
</head>
<body>

<div class="container mt-5">
    <button type="button" class="btn btn-primary focus-ring">
        Submit Form
    </button>
</div>

</body>
</html>

When the user navigates to the button using the keyboard, the focus state becomes visually identifiable.

Advantages of Bootstrap Focus Ring Utilities

Bootstrap Focus Ring Utilities provide several benefits:

  • They make keyboard focus more visible.

  • They support accessible interface design.

  • They reduce the need for custom CSS.

  • They provide consistent focus styling.

  • They can be customized using CSS variables.

  • They can be applied to different interactive elements.

  • They help maintain consistent design across a website.

Conclusion

Bootstrap Focus Ring Utilities provide a simple way to create clear and customizable focus indicators for interactive elements. The .focus-ring utility is especially useful for accessibility because it helps keyboard users identify which element currently has focus. Developers can use Bootstrap's built-in focus-ring classes and CSS custom properties to adapt the appearance to their application's design while retaining a clear visual indication of keyboard focus.