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

我有一个

标签

额外说明和一个

输入

字段

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

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

电话
交货

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

---

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

首先，我总是将

映射到字段的

id

，而不是它的

名称

（对于单选按钮和复选框尤其重要）：

aria descripeby

仍将其与字段关联，但会在字段后短暂暂停后宣布。它对屏幕阅读器以外的任何东西都没有影响

但对于您关于更大的单击区域的观点，从语义上讲，将其保留在

中是可以的，我只想将其保留在那里，就像您的示例一样

---

这也意味着您不需要依赖ARIA来完成本机元素的工作（尽管它做的事情并不完全相同）。

首先，我总是将

映射到字段的

id

，而不是它的

名称（对于单选按钮和复选框尤其重要）：

aria descripeby
仍将其与字段关联，但会在字段后短暂暂停后宣布。它对屏幕阅读器以外的任何东西都没有影响

但对于您关于更大的单击区域的观点，从语义上讲，将其保留在
中是可以的，我只想将其保留在那里，就像您的示例一样

这也意味着您不需要依赖ARIA来完成本机元素的工作（尽管它做的事情并不完全相同）。
我也更喜欢第一个解决方案，因为“for delivery”可能是一个重要的信息，应该毫不延迟地说出来。在第一个解决方案中，使用几个屏幕阅读器来测试它，以了解它的声音。它可能会说“电话接送”作为一个连续的句子。你可能对它的发音没什么意见，但从视觉上看，“为了交付”似乎是一个不太强调的附加短语（因为它是灰色文本而不是黑色）。您可能希望它被理解为一个附加短语，在“电话”之后有一个短暂的停顿，然后是“为了传递”。正如@aardrian所说，Aria describedby可以做到这一点，但我也喜欢把点击量更大的目标作为一个大标签。（续…（续…）您可以通过在文本中添加逗号来诱使屏幕阅读器暂停。但是，您并不真正希望显示逗号，因此它必须位于aria标签中<代码>用于交付

。但如果你到了这一点，你可能会挑剔解决方案。你可能还有其他更大的问题要花时间解决。我只是想指出诀窍：-）我也更喜欢第一个解决方案，因为“交付”可能是一个重要的信息，应该毫不拖延地说出来。在第一个解决方案中，用几个屏幕阅读器来测试它，听听它的声音。它可能会说“电话接送”作为一个连续的句子。你可能对它的发音没什么意见，但从视觉上看，“为了交付”似乎是一个不太强调的附加短语（因为它是灰色文本而不是黑色）。您可能希望它被理解为一个附加短语，在“电话”之后有一个短暂的停顿，然后是“为了传递”。正如@aardrian所说，Aria describedby可以做到这一点，但我也喜欢把点击量更大的目标作为一个大标签。（续…（续…）您可以通过在文本中添加逗号来诱使屏幕阅读器暂停。但是，您并不真正希望显示逗号，因此它必须位于aria标签中<代码>用于交付。但如果你到了这一点，你可能会挑剔解决方案。你可能还有其他更大的问题要花时间解决。我只想指出诀窍：-）@aardrian已经回答了你的问题。但是说到可访问性，要注意文本对比度。@aardrian已经回答了你的问题。但是说到可访问性，要注意文本对比。

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

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