[switch] Differentiate the semantics of a switch vs a checkbox

[jyasskin]

The draft switch explainer in #785 says "A switch toggles a binary state on or off." In HTML, a checkbox is defined as

The input element represents a two-state control that represents the element's checkedness state. If the element's checkedness state is true, the control represents a positive selection, and if it is false, a negative selection.

The HTML proposal for switch says

The input element, when the switch attribute is set, represents a two-state control representing the element's checkedness. If the element's checkedness state is true, the control represents a positive selection, and if it is false, a negative selection.

This makes it seem like a switch is just an alternate style for a checkbox, and since we try to put style in CSS and semantics in markup, maybe the switch UI should just be appearance: switch on a checkbox input. (And maybe that appearance wouldn't apply to a checkbox with the indeterminate attribute, to avoid needing to answer the question of how to map that to native switch controls.)

But there probably is some reason beyond styling that people use switches instead of checkboxes. It's not that they have an immediate effect: checkboxes can also have an immediate effect. Whatever the reason is, the explainer here and the eventual spec should explain it so that authors can know which to use.

[lukewarlow]

They have distinct aria roles and that's one reason why both proposals use DOM rather than pure CSS to differentiate them. I agree it's important to explain the differences though.

[scottaohara]

There is overlap, but you even acknowledge one of the differences in your initial comment, switches have no indeterminate state.

Does open ui need to completely define the semantics for elements, like switch, that already have their semantics defined in ARIA? Can it be enough to point to that?

If creating something new, completely agree with outlining the semantics.

[jyasskin]

Good point that ARIA might have the text you need. It says,

A type of checkbox that represents on/off values, as opposed to checked/unchecked values.

The aria-checked attribute of a switch indicates whether the input is on (true) or off (false). The mixed value is invalid, and user agents MUST treat a mixed value as equivalent to false for this role.

NOTE
A switch provides approximately the same functionality as a checkbox and toggle button, but makes it possible for assistive technologies to present the widget in a fashion consistent with its on-screen appearance.

Is that the key difference, that when "checked" means "on", one should use a switch? Or is it more about the possibility of filling in the track and thumb to provide more detailed meanings for the two states?

---

Incidentally, the lack of a user-inaccessible indeterminate state doesn't help authors decide which to use, and I can't think of a way that UAs could take advantage of the declaration that the checkbox will never be indeterminate. Are there any ways that UAs could specialize checkboxes knowing that the author doesn't plan to set the indeterminate property? (Rendering as a switch isn't one, since one could render the indeterminate state with the thumb in the middle or absent.)

[github-actions]

There hasn't been any discussion on this issue for a while, so we're marking it as stale. If you choose to kick off the discussion again, we'll remove the 'stale' label.