accessibility-guidelines

This document is in beta. Help us by reporting issues via Github or email.

Changes on focus

Just navigating to an interactive control with the keyboard shouldn’t trigger any action, and shouldn’t move the keyboard focus somewhere else.

On this page:

Requirements
Guidance for Design
Guidance for Web
More info

Requirements

When a user interface element receives keyboard focus (for example when users reach it by pressing the ‘Tab’ key, or when they click on it), that should not cause any big change to happen, such as:

automatically loading a new page;
submitting a form;
moving the keyboard focus somewhere else;
significantly changing the content of the page.

Such changes only occur when initiated by the user (e.g. upon activation of a button or link).

Common mistakes

A dropdown menus automatically triggers navigation as the user uses the ‘Tab’ or ‘Arrow’ keys to move between the options.
A big change (like loading a new page) happens when a user is merely leaving a form control.
Focusing an element automatically moves the keyboard focus to another element.

Why?

This stops unexpected things happening without screen reader and screen magnifer users being aware of it.

Official wording in the Web Content Accessibility Guidelines

3.2.1 On Focus: When any component receives focus, it does not initiate a change of context. (Level A)

See the W3C’s detailed explanation of this guideline with techniques and examples.

Guidance for Design

Make sure you don’t design an interaction, where moving the keyboard focus to an element causes any of the following to happen:
navigating to a new page, or reloading the page
submitting a form
moving the keyboard focus somewhere else
significantly changing the content on a page

Guidance for Web

focus or blur events do not cause dis-orientating events such as:
navigating to a new page
reloading the page
submitting a form
moving the focus somewhere else using the HTMLElement.focus() method
significantly changing the content on a page