如何将额外信息语义标记到输入和标签字段

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 来完成原生元素的工作（尽管它完全做同样的事情）。