Understanding the Focus ring

WCAG guideline 2.4.7 Focus Visible requires you to consider keyboard navigation. Users using the keyboard are aware of which element currently has focus.

For many users, navigation relies on using the Tab and Shift Tab keys

• Tab → move forward through interactive elements
• Shift + Tab → move backward

While there are additional navigation keys introduced for more advanced controls, they will not be discussed here, although the same core requirements remain the same.

---

Moving through the page elements

Using the Tab key allows users to move through active elements on the page, such as :

• links
• buttons
• form controls

While navigating the page, there should be a clear visual cue indicating which element is active. Without this, keyboard users can quickly lose track of where they are on the page.

---

Styling Active Elements

When an element has focus, it needs to stand out. This is achieved by applying a distinct style which helps differentiate it from surrounding elements. This can be achieved in several ways:

• Background colour changes
• Borders or outlines
• Underlines
• A focus ring

One of the most common methods used to achieve focus visibility is the focus ring.

---

Focus Ring

As the name suggests, a focus ring is a visible outline that surrounds the element in focus. It is one of the most common and effective methods for indicating focus.

Why focus rings are widely used:

• They are simple to implement, as you will see from the code example later in this article.
• They are easily recognisable…. when implemented correctly.
• They do not affect the layout. When using outline, the ring appears around the content without affecting the surrounding elements

Focus Ring is one solution to WCAG 2.4.7

The focus ring is one of a number of methods for meeting the requirements of WCAG 2.4.7. Other approaches can also be effective, as long as they provide clear indication of what has focus.

Best Practices for Focus Rings

When using a focus ring, there are several important considerations to ensure it is implemented correctly and meets accessibility standards.

Contrast

Contrast is critical. If it cannot be seen clearly by everyone then it fails its purpose. You need to ensure it meets the appropriate contrast levels. WCAG 2.4.11 (Focus Appearance, AA in 2.2) requires at least 3:1 contrast against adjacent colours.

Some parts of your webpage will include multiple background colours ( for example, headers and footers). So your focus style needs to be visible across all contexts. In some cases that may mean you change the colour of the focus ring for specific backgrounds.

Thickness

The thickness of the ring of about 2-3px is recommended. It gives the line more definition and in turn more visibility. This is not a strict rule, but thinner outlines can become difficuct to see, especially on high-resolution screens.

Offset and positioning

The positioning of the ring matters, how it wraps around the element and the space between them. Ideally you want it to offset the control, leaving a couple of pixels at least between the control and the ring. Positioning the focus ring slightly outside the element improves visibility and avoids clashes with the element’s own styles.

There have been instances where the ring is flush with a button and it not clear if that button has focus. We need to avoid this from happening.

button:focus-visible {
   outline: 3px solid #005fcc;
   outline-offset: 3px;
}

Implementing Focus Styles

There are a number of ways of applying the focus ring but the most practical way to do this is to use the CSS pseudo-classes,

• :focus
• :focus-visible.

:focus was the previous way of applying a focus ring. It would apply whenever an element receives focus—regardless of how that focus was triggered, be it the:

• Mouse
• Keyboard
• Script

Due to this some developers would reset the :focus to not show anything.

/* ❌ Bad: removes accessibility */
:focus {
  outline: none;
}

This created serious usability issues for keyboard users.

To resolve this the :focus-visible was introduced.

:focus-visible only applies when the browser determines that a visible focus indicator is needed—most commonly during keyboard navigation.

It applies the focus indicator where the browser thinks it should be applied and not in every instance of focus:

• Keyboard navigation → show focus
• Mouse interaction → often do not

Going back to the button example.

• Click a button with a mouse → :focus applies, but :focus-visible usually does NOT
• Tab to a button with keyboard → both :focus and :focus-visible apply

With :focus-visible, you can safely control when focus styles appear:

Here is an example of the code you could use:

/* this removes a focus pattern on all items */
:focus {
  outline: none; 
}

/* this applies a focus pattern on the relevant items 
    at the relevant times */
:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 3px;
}

This ensures that keyboard users always see a focus indicator and mouse users aren’t shown unnecessary outlines

Important Accessibility Note

WCAG does not require hiding focus indicators for mouse users. It requires that keyboard users must always have a visible focus indicator.

Using :focus-visible is a practical way to balance usability and design without compromising accessibility.

Focus ring best practices:

• Prefer :focus-visible for styling focus states
• Never remove focus styles without replacing them
• Ensure strong contrast against all backgrounds
• Use a thickness of around 2–3px
• Apply outline-offset to improve clarity
• Keep focus styles consistent across components
• Keep focus styles consistent across components

A focus indicator is not just a visual detail—it’s a core part of how users navigate your interface. If users can’t see where they are, they can’t use your product effectively.