[whatwg] Add <input> "Switch" Type
Jukka K. Korpela
jkorpela at cs.tut.fi
Tue Nov 19 11:13:44 PST 2013
2013-11-19 16:25, Domenic Denicola wrote:
> From: whatwg-bounces at lists.whatwg.org [mailto:whatwg-
>> I agree that the look and feel is different from checkbox but all
>> the differences seem to be purely presentational. If you disagree,
>> you need to elaborate a bit more.
> Interestingly, Microsoft's Windows Store apps guidelines disagree. I
> find their reasoning somewhat compelling, although novel:
> "Use a toggle switch for binary settings when changes become
> effective immediately after the user changes them."
> "Use a checkbox when the user has to perform extra steps for changes
> to be effective."
From the usability and accessibility point of view, this seems to
address an important issue. Authors sometimes use checkboxes (or radio
buttons) so that changing their state has an immediate effect, even
submitting a form. This may violate normal user expectations and can be
confusing. Normally, we enter some data, using various controls, and
then click on a button (or do something equivalent) to request for an
action. Checking a checkbox should not be a commitment, any more than
typing text in a feedback form or selecting an item from a dropdown list
in an order form should be a commitment.
This means that things that have immediate effect should be buttons, or
something else recognized as action-triggering control. So why not use
a button? Maybe because a button does not normally have a visible state.
A toggle switch would thus logically be a combination of a checkbox and
a button: it has a direct effect, like a button, but it remains visible
(or otherwise perceivable) in an on or off state, like a checkbox. And
it should probably have a dual ARIA role: role="checkbox button".
But maybe this means looking at things in a too narrow perspective, as
if controls were only used in forms that submit data to a server. A
purely application-like page may conceivably have checkboxes and radio
buttons that have immediate effects (say, so that in an image processing
application, checking a checkbox immediately turns the image to
grayscale). Checkboxes probably wouldn’t confuse a user who knows at all
what he is using. On the other hand, toggles could be used, too. Maybe
even better than checkboxes.
More information about the whatwg