Semantic Form Markup for Yes or No Questions - Or Should I Tell my Designers to Bugger Off?
- by sholsinger
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?
