Focus Ring — The Outline Indicator and Its Importance

In this tutorial, you will learn about Focus Ring. We cover key concepts, practical examples, and best practices to help you master this topic.

The focus ring is the visible outline that appears around focused elements, essential for keyboard navigation and meeting WCAG 2.2 Focus Appearance requirements.

In this tutorial, you'll learn about the Focus Management focus ring.

What You'll Learn

By the end of this lesson, you'll understand the browser's default focus ring, WCAG requirements, and how to customize focus rings without removing them.

Why It Matters

The focus ring is the only visual indicator keyboard users have to know their location. Removing or hiding it makes navigation guesswork.

Real-World Use

DodaTech's custom focus ring uses a 3px blue outline that is visible on all background colors and meets WCAG 2.2 requirements.

Focus Ring Anatomy

flowchart LR
  A[Focus Ring] --> B[Default: browser outline]
  A --> C[Custom: CSS outline/border]
  A --> D[Enhanced: box-shadow]
  B --> E[Varies by browser]
  C --> F[Consistent design]
  D --> G[Multi-layer indicator]

Browser Default Focus Rings

/* Chrome/Edge: blue outline */
:focus {
  outline: -webkit-focus-ring-color auto 1px;
}

/* Firefox: dotted outline */
:focus {
  outline: 1px dotted;
}

/* Safari: blue glow */
:focus {
  outline: 2px solid Highlight;
}

Customizing Focus Rings

/* Custom focus ring meeting WCAG 2.2 */
:focus-visible {
  outline: 3px solid #0066CC;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Enhanced with box-shadow for better visibility */
:focus-visible {
  outline: 2px solid #0066CC;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.3);
}

/* Inside focus ring for compact elements */
button:focus-visible {
  outline: 2px solid #0066CC;
  outline-offset: -2px;
}

Never Remove the Focus Ring

/* NEVER DO THIS */
:focus {
  outline: none;
}
/* Or this */
*:focus {
  outline: 0;
}

If you must override the default, always provide a custom focus indicator.

Common Mistakes

• Removing the focus ring completely: The most common and harmful Accessibility mistake.
• Using low contrast outline: An outline that does not contrast with the background is invisible.
• Making the outline too thin: WCAG 2.2 requires minimum 2px thickness.
• Focus ring disappears on hover: The focus ring must persist regardless of hover state.
• Not testing focus ring on all elements: Custom controls may not receive the same styles.

Practice and Challenge

1. What is the focus ring? A visible outline that appears around the focused element.

2. What is the minimum thickness required by WCAG 2.2? 2px.

3. What CSS property creates the focus ring? outline.

4. Why should you never set outline: none on focus? It removes the only visual indicator of focus for keyboard users.

5. Challenge: Audit your website's focus ring on every interactive element. Verify it meets WCAG 2.2 requirements.

FAQ

Mini Project

Design and implement a focus ring system for your website. Use :focus-visible for keyboard-only display. Verify WCAG 2.2 Focus Appearance Compliance.

What's Next

Continue to :focus-visible CSS to learn about smart focus indicators.