2015-10-15 16 views
2

如果我想在用户点击相关文本时填充复选框/收音机,那么我倾向于包装它在一个标签如屏幕阅读器友好的方式来标记一个复选框/单选按钮,这是已经使用标签可点击

HTML

<fieldset class="inline"> 
     <label for="radio-inline-1" class="block-label"> 
      <input type="radio" value="Yes" name="radio-inline-group" id="radio-inline-1"> 
      Yes 
    </label> 
    <label for="radio-inline-2" class="block-label selected"> 
      <input type="radio" value="No" name="radio-inline-group" id="radio-inline-2"> 
      No 
    </label> 
</fieldset> 

所以...我怎么现在标签的复选框/收音机集的问题以合规的庄园?

这是“无论”的HTML + CSS的情况?例如

HTML

<p class="pretendLabel">Do you like compliant code?</p> 
<fieldset class="inline"> 
     <label for="radio-inline-1" class="block-label"> 
      <input type="radio" value="Yes" name="radio-inline-group" id="radio-inline-1"> 
      Yes 
    </label> 
    <label for="radio-inline-2" class="block-label selected"> 
      <input type="radio" value="No" name="radio-inline-group" id="radio-inline-2"> 
      No 
    </label> 
</fieldset> 

还是我使用一个额外的标签有两个“为” S,拆开包装标签或其他什么东西?

我的担心主要是屏幕阅读器没有正确地将问题和潜在答案关联起来,而没有“for”或假装标签上的其他直接关联。

回答

2

使用带有图例元素的字段集。

<fieldset class="inline"> 
    <legend>Do you like compliant code?</legend> 
+1

哦,那很简单!图例是否与屏幕阅读器的父字段集相关联? – tymothytym

+1

是的。这就是你要求的。 – Quentin