Screen-reader 标记复选框/单选按钮的友好方式，它已经使用了可点击的标签

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>

那么...我现在如何在合规庄园中标记复选框/单选框集的问题？

是"whatever"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>

Screen-reader 标记复选框/单选按钮的友好方式，它已经使用了可点击的标签

Screen-reader friendly way to label a checkbox / radio button, that is already using a label to be click-able

html

checkbox

radio-button

screen-readers