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>

那么......我现在如何在合规庄园中标记复选框/广播设置问题？

是不是＆＃34;无论什么＆＃34; html + css？ e.g。

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>

或者我使用额外的标签和两个＆＃34; for＆＃34; s，打开标签或其他东西？

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

Answer 1

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

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

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

1 个答案: