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

Question

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

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

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

你的做法没有错。如果您担心屏幕 readers 的冗长（可能是用户测试的结果），那么您可以稍微调整一下并使用 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 仍然将它与该字段相关联，但在该字段之后宣布它并有一个短暂的停顿。它对屏幕以外的任何东西都没有影响 reader.

但是对于您关于更大的点击区域的观点，并且考虑到语义上将它留在 <label> 中是可以的，我会像您的示例一样将它留在那儿。

这也意味着您不依赖 ARIA 来完成原生元素的工作（虽然它完全做同样的事情）。

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

How to semantically markup extra information to a input and label field

html

accessibility

forms

semantic-markup