向单选按钮添加标签

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

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

我使用的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>

来源

2015-10-15 Mathemats

你需要的是在一个字段集legend，而不是一个标签。标签实际上只用于配对输入，因此feitla答案中的for/id建议。传说是为字段集提供关联名称的方式。尽管他们很难风格化。使用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>

来源

2015-10-15 12:14:03 stringy

你<label>元素应该有一个相关的for属性，以便将其关联到正确的输入/收音机。

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

来源

2015-10-15 05:08:36 feitla

由于输入嵌套在标签内，因此该标签关联的很好。我指的是另一个标签，它应该与字段集关联，但不是。我将编辑我的Q来指定。 – Mathemats

向单选按钮添加标签

回答

相关问题