为单选按钮添加标签

Question

我正在制作一份调查问卷，我有一个问题标签，然后是供用户回答的单选按钮。问题文本会添加一个标签，然后根据回答的数量 (yes/no/unsure、male/female) 添加带标签的单选按钮。我的问题是我也在尝试保持可访问性，我需要将问题文本标签与单选按钮相关联。

具有嵌套输入（无线电）的标签关联良好，有问题的是附加到字段集的标签。

我使用 WAVE 工具栏基本符合辅助功能标准，但我似乎无法克服孤立标签错误。

<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>

Answer 1

您的 <label> 元素应具有关联的 for 属性，以便将其关联到正确的 input/radio.

<label class="radio-inline" for="{{responseOption.UniqueID}}" ng-repeat="responseOption in question.Responses">

Answer 2

你想要的是 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 让他们成为一个小组。然后你可以只用一个段落来代替问题。例如

<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>

为单选按钮添加标签

adding labels to radio buttons

html

accessibility