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

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>

或者我是否使用带有两个“for”的额外标签，打开标签或其他东西？

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

Answer 1

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

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