Semantic Form Markup for Yes or No Questions

Posted by sholsinger on Pro Webmasters See other posts from Pro Webmasters or by sholsinger
Published on 2011-02-01T21:31:19Z Indexed on 2011/02/03 23:35 UTC
Read the original article Hit count: 329

Filed under:
|
|

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?

UPDATE: I have posted a related question on the UI SE per your suggestions. You can find it here: http://ui.stackexchange.com/q/3335/3493

© Pro Webmasters or respective owner

Related posts about html

Related posts about semantic-web