Select boxes shouldn't submit on change

Some interfaces include forms that consist solely of a select box, like a sorting component. And they are made to submit when the user selects an option onchange.

This approach omits the button to declutter the interface and save users a click. But it does so at the cost of usability and accessibility.

Top: a select box without a button (bad). Bottom: a select box with a button (good).

Minimal interfaces aren't necessarily simple interfaces. Counting clicks to infer usability isn't particularly useful either.

But here I'll explain how submitting a form when an option is selected causes issues for keyboard and screen reader users.

How keyboard users are affected

A form without a button uses JavaScript to submit the form when the onchange is triggered by selecting a new option.

But some browsers wrongly fire the onchange event when the user presses the Down key.

So as a user moves from the first to the second option, the form will be submitted before the user has a chance to move to the third option and beyond.

This happens in a number of Windows browsers like Chrome, Opera and Internet Explorer 9 and under.

How screen reader users are affected

Screen reader users can struggle too because the act of reading an option selects the option too.

This again causes the form to be submitted prematurely.

Apart from this, navigating users automatically when interacting with a form control is disorientating and unfamiliar—users don't expect this to happen.

What to do about it

Links are for navigation, forms are for input.

Using a select box for navigation is materially dishonest and fails Web Content Accessibility Guidelines Success Criteria 3.2.2:

Avoid the issues by including a button or by exploring ways to avoid the problem altogether.

Summary

Submitting the form when a select box option is selected might declutter an interface and reduce clicks, but it can cause significant problems for some people.

Inclusive design is about making things work for everyone no matter what. Taking control away from the user is a good way to cause problems for them.

Reducing clicks and decluttering an interface may be the result of a well-designed experience, but they're not objectives in and of themselves.

Just give users a button. This gives users a clear separation between input and submission which works well for everyone no matter which browser they use.