Focus must not be thrown away when it arrives

Rule on-focus-blur · Forms · impact serious · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

An element that blurs itself the moment it is focused cannot be used from a keyboard at all: Tab moves to it, the handler throws focus away, and the user is bounced somewhere unpredictable. The pattern is usually left over from suppressing a focus outline — a visual preference that costs the control its operability.

How to fix#

Delete the blur() call. If the goal was to hide the focus ring for mouse users, style :focus-visible instead, which already leaves keyboard focus visible.

Example#

<a href="/x" onfocus="this.blur()">Home</a>

<a href="/x">Home</a>

WCAG success criteria#

3.2.1 On Focus — Level A#

Merely receiving focus must never trigger a change of context (navigation, form submission, a new window, or moved focus).

Understanding 3.2.1

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549

References#

• WCAG — On Focus