accessibility-guidelines

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

Back to the overview page

Changes on focus

On this page:

• Summary
• Requirements
• Guidance for Design
• Guidance for iOS
• Guidance for Android
• Guidance for Flutter
• Guidance for Web
• More info

---

Summary

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

---

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 iOS

This section needs more content. Contribute via Github or email.

---

Guidance for Android

This section needs more content. Contribute via Github or email.

---

Guidance for Flutter

This section needs more content. Contribute via Github or email.

---

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

---

More info

Sources

• W3C Web Content Accessibility Guidelines 2.1
• Government Digital Service WCAG 2.1 Primer
• Barclays’ Accessibility Design Standards

Contribute

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

This site is open source. Improve this page.