←  All terms
F
Accessibility

Focus Indicator

A focus indicator visibly shows which interactive element is currently selected during keyboard navigation.

A focus indicator visibly shows which interactive element is currently selected during keyboard navigation. Implementation should favor native web standards and combine automated checks with keyboard and assistive-technology testing. The concept is closely related to Keyboard Navigation and WCAG.

Read more

Keyboard Navigation

WCAG

Color Contrast

FAQ

Focus Indicator

What is the difference between :focus and :focus-visible?
The :focus pseudo-class applies to every focused element, including after a mouse click. :focus-visible applies only when the browser considers a visible focus appropriate, typically during keyboard use. This allows the ring to stay hidden on mouse clicks without disadvantaging keyboard users. For text fields, browsers generally always show focus.
How is a focus indicator tested?
The core is a manual test: tab through the page and check that every interactive element is visibly marked. Automated tools find missing styles but cannot judge whether the outline is noticeable in context. Modals, menus, and overlays deserve extra attention because focus is especially easy to lose there.
Why is removing the focus indicator with CSS a mistake?
When the default outline is removed with outline: none, keyboard users can no longer see where they are. Links, menus, and forms become hard to operate. Anyone replacing the browser default for design reasons must provide an equally visible substitute. The :focus-visible pseudo-class makes it possible to show the ring mainly during keyboard use.
What contrast ratio does a focus indicator need?
For interactive components and graphical objects, WCAG 2.1 AA requires a contrast ratio of at least 3:1. This also applies to the visible focus ring against its surroundings. A light gray outline on a white background often fails this value. Contrast should therefore be checked against every background color used on the page.