I have been working on User-Survey Form, and have discovered that doing Questions and Answers isn’t nearly as easy as you’d think?!
Specifically, when there is a Question with Multiple Answers - in the form of Radio Buttons - what is the proper way to mark things up?? :-/
The problem is "How do you semantically tie the Question to the Answer and the Answer to the Radio Buttons so it is all one logical unit?
Based on my research, the best way to achieve this is to tie each Radio Button to its Label, and then put the Question inside the <legend> tags and bundle it all together using the <fieldset> tags.
Below is my best understanding of how this should work with a demo Survey Form which has 3 types of Questions: 1.) Likert Scale, 2.) Yes/No, and 3.) Open-Ended.
I would appreciate a review of my code below, and see how everyone else thinks I did SEMANTICALLY…
/****************************/
/* RATE THIS ARTICLE Styles */
/****************************/
#rateThisArticle{
width: 800px;
}
#rateThisArticle fieldset{
padding: 30px 48px 50px 48px;
}
#rateThisArticle legend{
margin: 0 0 0 -2.5em;
}
#rateThisArticle label{
display: inline;
font-weight: normal;
}
#rateThisArticle table{
margin: 0;
border-collapse: collapse;
}
#rateThisArticle th{
padding: 4px 5px 2px 5px;
font-size: 0.8em; /**/
text-align: center;
border: 1px solid #AAA;
background-color: #DDD;
}
#rateThisArticle td{
padding: 6px 5px 6px 5px;
text-align: center;
border: 1px solid #AAA;
}
#rateThisArticle .colQuestion{
width: 350px;
padding-left: 15px;
font-size: 1em; /**/
text-align: left;
}
#rateThisArticle .radioGroup legend,
#rateThisArticle .radioYesNo legend{
font-weight: normal;
}
/* LIKERT Question */
#rateThisArticle .radioGroup{
padding: 0;
border: none;
}
#rateThisArticle .radioGroup table{
margin: 0 0 0 25px;
}
#rateThisArticle .radioGroup td{
width: 60px;
vertical-align: top;
border: none;
}
#rateThisArticle .radioGroup td label{
display: block;
margin: 0;
padding: 0;
font-size: 0.9em;
line-height: 1.4em;
font-weight: bold;
}
#rateThisArticle .radioGroup td label span{
display: block;
margin: 0;
padding: 0;
font-size: 0.9em;
line-height: 1.4em;
}
#rateThisArticle li{
padding: 20px 0 0 0;
}
#rateThisArticle p{
padding: 0;
}
/* YES-NO QUESTION */
#rateThisArticle .radioYesNo{
padding: 0;
border: none;
}
#rateThisArticle .radioYesNo div{
margin: 5px 0 0 45px;
}
#rateThisArticle .radioYesNo label{
margin: 0 25px 0 0;
font-weight: bold;
font-size: 0.9em;
}
<form id="rateThisArticle" action="" method="post">
<fieldset>
<legend>Rate This Article</legend>
<!-- LIKERT QUESTION -->
<li>
<fieldset class="radioGroup">
<legend>9.) This article taught me something practical that I can apply in my personal life.</legend>
<table id="test" cellspacing='1'>
<tbody>
<tr>
<td>
<input id="Question9_Opt1" name="responseToQuestion[9]" type="radio" value="1" />
<label for="Question9_Opt1">1<span>Strongly<br />Disagree</span></label>
</td>
<td>
<input id="Question9_Opt2" name="responseToQuestion[9]" type="radio" value="2" />
<label for="Question9_Opt2">2</label>
</td>
<td>
<input id="Question9_Opt3" name="responseToQuestion[9]" type="radio" value="3" />
<label for="Question9_Opt3">3</label>
</td>
<td>
<input id="Question9_Opt4" name="responseToQuestion[9]" type="radio" value="4" checked="checked" />
<label for="Question9_Opt4">4</label>
</td>
<td>
<input id="Question9_Opt5" name="responseToQuestion[9]" type="radio" value="5" />
<label for="Question9_Opt5">5<span>Strongly<br />Agree</span></label>
</td>
</tr>
</tbody>
</table>
</fieldset>
</li>
<!-- YES/NO QUESTION -->
<li>
<fieldset class="radioYesNo">
<legend>10.) Would you recommend this article to a friend?</legend>
<div>
<input id="Question10_Opt1" name="responseToQuestion[10]" type="radio" value="1" />
<label for="Question10_Opt1">Yes</label>
<input id="Question10_Opt2" name="responseToQuestion[10]" type="radio" value="0" />
<label for="Question10_Opt2">No</label>
</div>
</fieldset>
</li>
<!-- OPEN-ENDED QUESTION-->
<li>
<label for="Question11">11.) What did you like most about this article?</label>
<textarea id="Question11" name="responseToQuestion[11]" cols="65" rows="14"></textarea>
</li>
</ul>
</fieldset>
</form>
Here is a screen-shot of how the output looks…
Personally, I think these Questions look awesome!! (Now I just hope they are acceptable semantically and from an Accessibility standpoint?!)
Thanks in advance!
Debbie