Question

我正在构建问卷，我有一个问题标签，然后是用户回答的单选按钮。问题文本添加了标签，然后根据响应的数量（是/否/不确定，男/女）添加标记的单选按钮。我的问题是我也在努力保持可访问性，我需要将问题文本标签与单选按钮相关联。

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

我正在使用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

你想要的是字段集中的legend，而不是标签。标签实际上只用于与输入配对，因此feitla的答案中的for / id建议。图例是为字段集提供关联名称的方法。虽然它们很难打造。您可能最好使用name attribute on the radio inputs将它们组成一个组。然后你可以使用一个段落来代替问题。 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>

Answer 2

您的<label>元素应具有关联的for属性，以便将其与正确的输入/广播相关联。

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

添加标签到单选按钮

2 个答案: