3.2.1 On Focus

Who it helps

Keyboard and screen reader users move focus through a page to explore it. If focus alone opens windows or jumps elsewhere, they get lost or cannot reach the rest of the page. People with cognitive disabilities and low vision are also confused by sudden changes.

How to meet it

• Trigger windows, dialogs, form submits and page loads only on activation, such as a click, Enter or Space, never on focus.
• Do not move focus to another element from a focus event handler.
• Know what is allowed: showing a tooltip, highlighting the field or expanding a small menu on focus is not a change of context.
• Tab through every page and check that nothing major happens until you press a key to activate something.

Examples

<label for="vat">VAT number</label>
<input id="vat" type="text" onfocus="window.open('/help/vat')">

<form id="signup" action="/signup" method="post">
  <label for="email">Email</label>
  <input id="email" type="email" autocomplete="email">
  <button onfocus="document.getElementById('signup').submit()">Sign up</button>
</form>

<label for="vat">VAT number</label>
<input id="vat" type="text" aria-describedby="vat-help">
<a id="vat-help" href="/help/vat">Where to find your VAT number</a>

<form action="/signup" method="post">
  <label for="email">Email</label>
  <input id="email" type="email" autocomplete="email">
  <button type="submit">Sign up</button>
</form>

Common mistakes

• Opening a modal or chat window when a field receives focus.
• Moving focus to another field from an onfocus handler to steer users.
• Navigating to a page when a menu link is focused instead of activated.

Related criteria

• 3.2.2 On Input
• 3.2.5 Change on Request
• 2.4.3 Focus Order
• 2.1.1 Keyboard

Official W3C explanation of 3.2.1