Pair select menus with a real action button
When a select menu triggers something, jumping to a page, filtering a list, switching language, the trigger has to be a button press rather than the menu changing. W3C lists H84 as sufficient for 3.2.2 On Input in combination with the general technique of using a submit button to start a change of context. The reason it gives is the keyboard case, and that is the whole point. Moving through the options of a select changes the control's value as you go, so a change handler fires on the first arrow press, before anybody has heard the second option. It also catches the ordinary mistake of landing on the wrong line, which a Go button lets you undo for free. W3C's own example uses type=button rather than type=submit, because the action there is client-side. Either one works.
How we find it in an audit
We operate every select on the page with the arrow keys alone, and the failure announces itself, because browsing the options navigates away. A scanner can flag onchange handlers on selects as suspects and cannot tell a harmless live filter from full navigation, so the judgment stays with a person.
How affected users experience it
Somebody opens a language menu and presses the down arrow to hear what is in it, because that is how you read a select. The first press commits the first option, and the page reloads in German before they ever heard English. Now they are on a page they cannot read, looking for the same menu, which will do it to them again.
Passes vs. fails
Passes
<label for="lang">Language</label>
<select id="lang" name="lang">
<option value="/de">Deutsch</option>
</select>
<button type="submit">Change language</button>Fails
<select onchange="location = this.value">
<option value="/de">Deutsch</option>
</select>Other ways to satisfy this rule
8 guides on this site are filed under 3.2.2 On Input. W3C lists this one as sufficient for that rule only alongside G80, so the pair is what passes and neither half does on its own.
- G13sufficientSay what a control will do before it does it
- G80sufficientUse a submit button, not automatic submission
- H32sufficientGive every form a real submit button
- PDF15sufficientGive PDF forms an explicit submit button
- SCR19sufficientNever change context when a select changes
- F36failureDo not auto-submit when the last field changes
This guide is our interpretation of W3C technique H84: Using a button with a select element to perform an action. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.