Semantics for Question w Multiple Answers Choices

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?! :eek:

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

Hey Debbie, I think what you have works and looks fine. When I make a simple survey form such as this I don’t use tables for my markup. I simply style the input elements themselves. I am not sure if this is semantically correct or not but it works for me.

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.

I think that’s how I would have done it with the legend asking the question and then the inputs and labels tied to each other. I wouldn’t have used a table but I think its ok in this instance to use one.

I don’t like the list numbers entered manually and I would have used the automatic numbers on an ordered list (ol) to do this. Although it would be hard to line them up with a corresponding legend because legends can’t be moved very easily so may not be worth the effort.

I would probably have added text descriptions for each of those intermediate buttons (2,3 and 4) also to be sure rather than just having the first and last with text.

On the whole though I think what you have done is logical and pretty semantic.

Okay.

I don’t like the list numbers entered manually and I would have used the automatic numbers on an ordered list (ol) to do this. Although it would be hard to line them up with a corresponding legend because legends can’t be moved very easily so may not be worth the effort.

Well, I am using PHP, so the number will be automatically generated once I plug in my PHP.

I was going to switch to an <ol>, but for the reasons you mentioned, and the fact that I like a parenthesis after the number, I figured using an <ul> and PHP was more practical.

I would probably have added text descriptions for each of those intermediate buttons (2,3 and 4) also to be sure rather than just having the first and last with text.

I work with statisticians and will have to ask them which is better from a testing standpoint.

I left out the intermediate labels because I believe that is how a Likert Scale is normally displayed, but I have seen it both ways and could do either.

On the whole though I think what you have done is logical and pretty semantic.

Thanks for the “thumbs up”!! :smiley:

Looks like I can dive into my PHP and MySQL and make this static HTML come alive with live data!

THANKS!!!

Debbie

I think you may be over-thinking the markup and making it more complicated and verbose than it needs to be. I would probably do something more like:


<form method=post>
<h2>Rate this article</h2>
<ol>
<li>This article taught me something practical that I can apply in my personal life. <label>Strongly disagree <input type=range max=5 value=4 name=9> Strongly agree</label>
<li>Would you recommend this article to a friend? <label><input type=radio name=10 value=1> Yes</label> <label><input type=radio name=10 value=0> No</label>
<li><label>What did you like most about this article? <textarea name=11></textarea></label>
</ol>
</form>