Provide a Visible Focus Indicator | BeforeMerge Rules | BeforeMerge

Pricing Blog Contributors Install Guide

Explore
Accessibility
Provide a Visible Focus Indicator

HIGHQualitysmallAccessibility

Provide a Visible Focus Indicator

Share

Any keyboard-focusable element must have a clearly visible focus indicator. (WCAG 2.1 SC 2.4.7)

Why This Matters

Keyboard users can't tell which element is focused, making the page unusable without a mouse.

Related Rules

Use Semantic HTML Elements

Quality

Add Alt Text to Images

Quality

Ensure Keyboard Navigation

Quality

Maintain Color Contrast Ratio

Quality

Catch this automatically on every PR

BeforeMerge scans your pull requests against this rule and dozens more. Get actionable feedback before code ships.

Join Waitlist Browse All Rules

AI-native code review knowledge base. Structured rules that catch what linters miss.

Product

Features
Explore
Pricing
Docs
GitHub

Company

About
Blog
Contributors
Contributing

Legal

Privacy Policy
Terms of Service
MIT License

© 2026 BeforeMerge. Built by

Features Explore

Rules Skills Knowledge Prompts

Pricing Blog Contributors Install Guide

Why this matters

Without a visible focus ring, keyboard users have no idea where they are on the page. A common regression is outline: none added for aesthetics with no replacement.

Good: keep the default outline or provide a custom :focus-visible style with sufficient contrast. Bad: *:focus { outline: none; } with nothing in its place.