屏幕阅读器友好的方式来标记一个复选框/单选按钮，这是已经使用标签可点击

Question

如果我想在用户点击相关文本时填充复选框/收音机，那么我倾向于包装它在一个标签如

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”或假装标签上的其他直接关联。

Answer 1

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

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