accessibility-guidelines

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

Back to the overview page

Changes on input

On this page:


Summary

Just changing the state of a form input (like a radio button) must not cause anything surprising to happen, like submitting a form, significantly changing the content on the page, or moving the keyboard focus.


Requirements

Changing the state of any user interface component (like a dropdown or a checkbox) must not automatically cause unexpected changes of context such as the following – unless the user has been advised of what was going to happen beforehand:

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

Common mistakes

Why?

It can be disorienting and hinder users from verifying information or correcting mistakes if the focus automatically changes when the user is not expecting it

It’s disorientating and confusing if the content of the page changes when users don’t expect it

Keyboard-only users and screen reader users navigate through radio buttons and options of dropdown menus one by one

With some Operating Systems and some implementations of radio buttons and dropdowns, this can cause each option to become selected in turn.

Official wording in the Web Content Accessibility Guidelines

3.2.2 On Input: Changing the setting of any user interface component does not automatically cause a change of context unless the user has been advised of the behavior before using the component. (Level A)

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


Guidance for Design

For input fields

For forms with radio buttons

For navigation


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

Do not use select elements as navigation menus

Do not move keyboard focus to the next control or to a validation error message during input

Doing better

More guidance for Web


More info

Sources

Contribute

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