On Input

What this means

Changing a form control's value must not automatically trigger a change of context, unless the user was warned about that behavior beforehand. This covers typing into a field, checking a box, or picking a dropdown option. A change of context includes things like automatic form submission, a new window opening, or a jump to a different page. If a control needs to trigger one of these on change, the interface has to tell the user that in advance.

Who it affects

People with visual disabilities are directly affected by unannounced context changes. They may not see a new window pop up, or notice a jump to a different part of the page. People with cognitive disabilities are also affected. An unexpected shift after simply picking an option can be disorienting and hard to recover from. Keyboard users lose their place in a similar way. They have to reorient themselves after an unplanned change they didn't ask for.

Code example

Bad

<!-- Selecting an option immediately navigates away, with no warning

that this dropdown behaves this way -->

<label for="country">Country</label>

<select id="country" onchange="window.location.href = this.value">

<option value="/us">United States</option>

<option value="/ca">Canada</option>

</select>Good

<!-- The label warns the user upfront that changing this selection

will navigate the page -->

<label for="country">Country (selecting this will take you to that country's page)</label>

<select id="country" onchange="window.location.href = this.value">

<option value="/us">United States</option>

<option value="/ca">Canada</option>

</select>How to test it

Interact with every form control on the page: type into fields, check boxes, and select dropdown options. Watch for any unannounced change of context, like automatic navigation, form submission, or a new window opening, right after a value changes. If this happens without clear warning given beforehand, this fails.