Sara Soueidan digs into this HTML/UX situation. “Yes” or “no” is a boolean situation. A checkbox represents this: it’s either on or off (uh, mostly). But is a checkbox always the best UX? It depends, of course:
Use radio buttons if you expect the answer to be equally distributed. If I expect the answer to be heavily biased to one answer I prefer the checkbox. That way the user either makes an explicit statement or just acknowledges the expected answer.
If you want a concrete, deliberate, explicit answer and don’t want a default selection, use radio buttons. A checkbox has an implicit default state. And the user might be biased to the default option. So having the requirement for an explicit “No” is the determinig factor.
So you’ve got the checkbox approach:
<label>
<input type="checkbox">
Yes?
</label>
Which is nice and compact but you can’t make it “required” (easily) because it’s always in a valid state.
So if you need to force a choice, radio buttons (with no default) are easier:
<label>
<input type="radio" name="choice-radio">
Yes
</label>
<label>
<input type="radio" name="choice-radio">
No
</label>
I mean, we might as well consider another a range input too, which can function as a toggle if you max it out at 1
:
<label class="screen-reader-only" for="choice">Yes or No?</label>
<span aria-hidden="true">No</span>
<input type="range" max="1" id="choice" name="choice">
<span aria-hidden="true">Yes</span>
Lolz.
And I suppose a <select>
could force a user choice too, right?
<label>
Yes or no?
<select>
<option value="">---</option>
<option value="">Yes</option>
<option value="">No</option>
</select>
</label>
I weirdly don’t hate that only because selects are so compact and styleable.
If you really wanna stop and make someone think, though, make them type it, right?
<label>
Type "yes" or "no"
<input type="text" pattern="[Yy]es|[Nn]o">
</label>
Ha.
:) Thanks Chris but plz emphasize that it’s more nuanced than the tl;dr in this post & that even though a range input or the option of typing the answer out are technically not wrong they’re not right either, for other UX/usability considerations (e.g ppl with motor issues). So, albeit fun explorations, the othet options are not valid for a real-life project focused on a11y and usability (specifically a state government project)
Also, every UX designer knows you should not use a select dropdown when you can use radio buttons so I think it’s worth accompanying these options with a usability/a11y warning ⚠️