I frequently receive mock-ups of HTML forms with the following prototype:
Some long winded yes or no question? (o) Yes ( ) No
The (o) and ( ) in this prototype represent radio buttons. My personal view is that if the question has only
a true or false value then it should be
a check box. That said,
I have seen this sort of "layout" from almost every designer
I've ever worked with.
If
I were not to question their decision, or question the client's decision,
I'd probably mark it up like this:
<p class="pseudo_label">Some long winded yes or no question?</p>
<input type="radio" name="the_question" id="the_question_yes" value="1">
<label for="the_question_yes" class="after_radio">Yes</label>
<input type="radio" name="the_question" id="the_question_no" value="0">
<label for="the_question_no" class="after_radio">No</label>
I really don't want to do that.
I want to push back and convince them that this should really be
a check box and not two radio buttons. But my question is, if
I can't convince them – you're welcome to help me try – how should
I code that original design requirement such that it is semantic and at least understandable
for screen reader users?
If
I were able to convince my tormentors to change their minds,
I would likely code it in the following fashion:
<label for="the_question">Some long winded yes or no question?</label>
<input type="checkbox" name="the_question" id="the_question" value="1">
What do you think about this issue? Should
I push back? Possibly more importantly is either way semantically correct?
