Visible Focus — Designing Visible Focus Indicators

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

Visible focus indicators show keyboard users which element currently has focus, with WCAG 2.2 Focus Appearance requiring a minimum 2px thick focus ring with 3:1 contrast ratio.

In this tutorial, you'll learn to design visible Keyboard Navigation focus indicators.

What You'll Learn

By the end of this lesson, you'll understand WCAG Focus Appearance requirements, how to design focus indicators, and techniques for making them visible without being obtrusive.

Why It Matters

Without a visible focus indicator, keyboard users cannot tell which element is focused. Navigating a page becomes guesswork.

Real-World Use

Doda Browser uses a 3px blue outline on all focusable elements, meeting WCAG 2.2 Focus Appearance requirements.

Focus Indicator Requirements

flowchart TD
  A[Focus Appearance] --> B[Minimum 2px thick]
  A --> C[3:1 contrast with background]
  A --> D[3:1 contrast with unfocused state]
  B --> E[Outline or border]
  C --> F[Not relying on browser default]
  D --> G[Change is perceivable]

Styling Focus Indicators

/* Browser default */
:focus {
  outline: 3px solid #4A90D9;
  outline-offset: 2px;
}

/* Remove outline for mouse users only */
:focus:not(:focus-visible) {
  outline: none;
}

/* Custom focus ring for buttons */
button:focus-visible {
  outline: 3px solid #0066CC;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.3);
}

WCAG 2.2 Focus Appearance

WCAG 2.2 SC 2.4.13 Focus Appearance requires:

1. Focus indicator at least 2 CSS pixels thick
2. Contrast ratio of at least 3:1 between focused and unfocused states
3. Contrast ratio of at least 3:1 between the focus indicator and the adjacent background

/* Meeting WCAG 2.2 Focus Appearance */
*:focus-visible {
  outline: 3px solid #1a73e8;
  outline-offset: 3px;
  border-radius: 2px;
}

Never Remove Focus

/* Never do this */
*:focus {
  outline: none;
}
/* This makes your site keyboard-inaccessible */

If you remove the default outline, always replace it with a custom focus indicator.

Common Mistakes

• Removing focus outlines entirely: The most common keyboard Accessibility failure.
• Using low-contrast focus indicators: A light gray outline on a white background is invisible.
• Relying on browser defaults: Browser defaults may not meet WCAG 2.2 requirements.
• Focus indicator disappears on certain backgrounds: Test on all background colors.
• Not applying focus styles to all interactive elements: Custom controls need focus indicators too.

Practice and Challenge

1. What are the WCAG 2.2 Focus Appearance requirements? Minimum 2px thick, 3:1 contrast with background and unfocused state.

2. What selector styles for keyboard focus only? :focus-visible.

3. What is wrong with *:focus { outline: none; }? It removes the focus indicator for all users.

4. How do you apply focus styles to keyboard users only? Use :focus-visible to target keyboard focus.

5. Challenge: Audit your website's focus indicators. Verify they meet WCAG 2.2 requirements and fix any issues.

FAQ

Mini Project

Implement a complete focus indicator system. Use :focus-visible for keyboard-only styles. Verify all interactive elements have a visible focus indicator.

What's Next

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