如何在语义上标记输入和标签字段的额外信息

Question

我有一个label额外的描述和一个input字段。

我有点不确定额外的描述是否属于这样的跨度包裹的标签字段：

<label for="phone">
    Telephone
    <span>For the delivery</span>
</label>
<input type="text" name="phone">

这样描述是可点击的。但我不确定这是否是考虑到 a11y 和语义标记的正确方法。

额外的信息属于标签还是应该分开，应该如何格式化？

Answer 1

首先，我总是将 映射<label>到id字段的 ，而不是它的name（对于单选按钮和复选框尤其重要）：

<label for="phone">
 Telephone
 <span>For the delivery</span>
</label>
<input type="text" name="phone" id="phone">

你的做法没有错。如果您担心屏幕阅读器的冗长（可能是用户测试的结果），那么您可以稍微调整一下并使用aria-describedby：

<label for="phone">
 Telephone
</label>
<span id="phoneAddl">For the delivery</span>
<input type="text" name="phone" id="phone" aria-describedby="phoneAddl">

aria-describedby仍然将它与字段相关联，但在字段之后和短暂的停顿宣布它。它对屏幕阅读器以外的任何东西都没有影响。

但是就您关于更大的点击区域的观点而言，考虑到语义上可以将其留在 中<label>，我会像您的示例一样将其留在那里。

这也意味着你不能依靠ARIA做本地要件的工作（虽然它不是很做同样的事情）。