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

Question

我有label个额外说明和input字段。

我有点不确定额外的描述是否属于包含在这样的范围内的标签字段：

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

这种描述是可点击的。但我不确定这是否是正确的方法，并考虑到了语义标记。

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

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来完成本机元素的工作（虽然它不是相当做同样的事情）。