On Input (3.2.2 – Level A)

Elements do not change when they receive input.

Introduction

As we saw with On Focus, all users need predictability when navigating a website. If elements don’t act as they expect, they may become disorientated. 

This is also true when elements receive input, they shouldn’t automatically change. For example, forms shouldn’t skip to another field or auto-submit without confirmation from the user.

A change on input is especially troublesome for users who navigate by keyboard, as well as those with visual disabilities or cognitive limitations. 

How to Pass

Ensure no elements change on input.

Here are some examples of the kinds of things to look out for:

• Forms must not auto-submit when all fields are filled – this prevents your users from checking and editing what they have written.
  
• Focus (the field where the user will input next) must not automatically jump to the next field in a form once a field is complete.
  
• Using a control (like selecting yes or no) must not automatically perform the action (for example, selecting to subscribe to a newsletter in a check box must not automatically subscribe your user, they should be able to click a submit button to confirm their decision).
  

Exceptions

Elements can change on input if you inform the user of the change before they have the chance to input their data or make their selection. For example, you may have seen websites with options in the header to choose a text size. Once you click on the size you want, the website changes without giving you the chance to confirm your choice.

Controls like that don’t need to have a submit button if it’s clear from the text before the element what will happen when you input.

Tips

The easiest way to pass is to use submit buttons and avoid jumping your users between fields. It’s all about leaving the control with your users, where it belongs.

See Also

• On Focus
• Change on Request
• Understanding Success Criterion 3.2.2 (W3C)