WCAG 3.2.1 — On Focus — Context Changes Unexpectedly on Focus

Who Is Affected

Keyboard users who navigate with Tab and Arrow keys, screen reader users, users with motor disabilities who may accidentally trigger focus events, and users with cognitive disabilities who need predictable page behavior.

What This Means

When someone moves focus to an element (by pressing Tab or clicking into it), the page should not automatically submit forms, open new windows, or navigate away. Users need control over when actions happen — they should have to press Enter, Space, or click to trigger meaningful changes.

Common violations include dropdown menus that automatically navigate when focused, search boxes that submit immediately when clicked into, and select lists that redirect the page when an option receives focus (instead of when selected).

Fix: CMS / Theme

Review your site's interactive elements for unexpected behavior:

Navigation Dropdowns:

1. Test your main navigation by pressing Tab through each menu item.
2. If dropdown submenus appear automatically on focus (not just on hover), this is usually acceptable.
3. If the page navigates away when focus moves to a menu item, remove the onFocus navigation handler.
4. In Joomla, check your menu module settings and template overrides.
5. In WordPress, review your theme's navigation JavaScript in functions.php or theme files.

Form Auto-Submit:

1. Check if any forms submit automatically when a field receives focus.
2. Remove onFocus="this.form.submit()" or similar JavaScript handlers.
3. Replace with explicit submit buttons or onChange handlers (which are acceptable under WCAG 3.2.2).

Fix: Content Editor

Search Forms:

1. If you have embedded search widgets that auto-submit when focused, replace them with versions that require a click or Enter key.
2. For custom HTML forms, remove any onFocus event handlers that submit the form.
3. Ensure all form submissions require an explicit user action like clicking "Submit" or pressing Enter.

Select/Dropdown Lists:

1. If you have dropdown lists that navigate to new pages immediately when an option receives focus (not when selected), this needs fixing.
2. Change the behavior so navigation only occurs onChange (when user actually selects an option) rather than onFocus.
3. Test by tabbing to the dropdown and using arrow keys — the page should not navigate until you press Enter or click.

Standard Reference

WCAG 2.1 Success Criterion 3.2.1 — On Focus, Level A

When any user interface component receives focus, it does not initiate a change of context.

• W3C Understanding SC 3.2.1
• WCAG Technique G107 — Using "activate" rather than "focus"
• WCAG Technique SCR26 — Inserting dynamic content
• WCAG Failure F55 — Change of context on focus