How to Create Accessible CSS Focus Styles
Focus indicators help keyboard users navigate your interface. Learn how to create visible, attractive focus styles that meet WCAG requirements without compromising design.
Key Takeaways
- Keyboard users rely on focus indicators to know which element is currently active.
- The focus indicator must be visible on all backgrounds β test on white, dark, and colored backgrounds.
- Every interactive element (links, buttons, inputs, selects, custom controls) must have a visible focus state.
CSS μΆμκΈ°
CSS μ½λ μΆμλ‘ νμΌ ν¬κΈ° μ κ°
Why Focus Styles Matter
Keyboard users rely on focus indicators to know which element is currently active. Without visible focus styles, navigating a website with a keyboard is like using a mouse without a cursor. WCAG 2.2 Success Criterion 2.4.7 requires visible focus indicators on all interactive elements.
The Default Problem
Most browsers provide a default outline on focused elements, but outline: none is one of the most common CSS declarations in the wild. Designers remove it because the default focus ring doesn't match their design, but they rarely add a replacement, breaking keyboard accessibility.
Creating Better Focus Styles
Use :focus-visible instead of :focus to show focus indicators only for keyboard navigation, not mouse clicks. Combine outline and box-shadow for a prominent but attractive indicator:
button:focus-visible {
outline: 2px solid #4F46E5;
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.3);
}
Contrast Requirements
WCAG 2.2 requires focus indicators to have a contrast ratio of at least 3:1 against adjacent colors. The focus indicator must be visible on all backgrounds β test on white, dark, and colored backgrounds. A thick outline with an offset works better than background color changes because it's visible regardless of the element's background.
Testing Focus Styles
Tab through your entire page to test focus styles. Every interactive element (links, buttons, inputs, selects, custom controls) must have a visible focus state. Test with forced-colors mode (Windows High Contrast) to ensure focus styles survive user color overrides.
κ΄λ ¨ λꡬ
κ΄λ ¨ ν¬λ§·
κ΄λ ¨ κ°μ΄λ
CSS Units Explained: px, em, rem, vh, and When to Use Each
CSS offers over a dozen length units, each suited to different situations. Understanding the differences between absolute and relative units is essential for building responsive, accessible interfaces.
Flexbox vs CSS Grid: A Practical Comparison
Flexbox and CSS Grid are complementary layout systems, not competitors. This guide clarifies when to reach for each one and how to combine them for robust, responsive page layouts.
How to Create CSS Gradients: Linear, Radial, and Conic
CSS gradients create smooth color transitions without image files. Learn to build linear, radial, and conic gradients with precise control over color stops, direction, and shape.
Troubleshooting CSS Specificity Conflicts
When CSS rules unexpectedly override each other, specificity is usually the culprit. This guide explains how specificity is calculated and provides strategies for managing it in growing codebases.
CSS Custom Properties (Variables) Best Practices
CSS custom properties enable dynamic theming, design tokens, and maintainable style systems. Learn how to organize, scope, and use CSS variables effectively in production applications.