I am building a questionnaire and I have a label for the question and then radio buttons for the user to answer with. The question text is added with a label and then depending on the number of responses (yes/no/unsure, male/female) labelled radio buttons are added. My problem is that I am also trying to maintain accessibility and I need to have the question text label be associated with the radio buttons.
The label with the nested input(radio) associates fine, the one with issues is the one attached to the fieldset.
I am using the WAVE toolbar for basic compliance to accessibility standards, but I can't seem to get over the orphaned label errors.
<div>
<label for="{{question.UniqueID}}" compile="question.Text"></label>
</div>
<div>
<fieldset class="col-sm-6" id="{{question.UniqueID}}">
<label class="radio-inline" ng-repeat="responseOption in question.Responses">
<input type="radio"
name="{{question.QuestionID}}"
id="{{responseOption.UniqueID}}"
value="{{responseOption.ResponseOptionID}}"
ng-model="$parent.selectedOptionID"
ng-click="newValue(value, question, responseOption)">
{{responseOption.Text}} <!--Male/Female, yes/no/unsure-->
</label>
</fieldset>
What you want is a legend in the fieldset, not a label. Labels are really only used to pair with inputs, hence the for/id suggestion in feitla's answer. Legends are the way to give an associated name to a fieldset. They're difficult to style though. You might be better off using the name attribute on the radio inputs to make them a group. Then you can just use a paragraph to put the question in instead. E.g.
<p>Q1: Do you like snozzberries?</p>
<input type=radio name=q1 id=q1-y /><label for=q1-y>Yes</label>
<input type=radio name=q1 id=q1-n /><label for=q1-n>No</label>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments