严格来说,您可以在一个部件上放置多个标签,但这并不是一个好主意,因为某些辅助技术可能无法处理它们。在存在多个标签的情况下,您应该将部件及其标签嵌套在一个
让我们考虑这个例子
html
Required fields are followed by *.
顶部的段落陈述了必填元素的规则。该规则必须在使用之前包含,以便有视力的用户和使用屏幕阅读器等辅助技术的用户在遇到必填元素之前了解其含义。虽然这有助于告知用户星号的含义,但不能依赖于它。屏幕阅读器在遇到星号时会将其朗读为“星号”。当有视力的鼠标用户悬停时,应该显示“必填”,这是通过使用 title 属性实现的。标题是否朗读取决于屏幕阅读器的设置,因此更可靠的做法是也包括 aria-label 属性,该属性始终被屏幕阅读器朗读。
上述变体随着您的使用而变得越来越有效
在第一个示例中,标签根本没有与输入一起朗读——您只得到“编辑文本空白”,以及单独朗读的实际标签。多个
在第二个示例中,事情变得更加清晰——与输入一起朗读的标签是“姓名星号姓名编辑文本必填”,标签仍然被单独朗读。事情仍然有点混乱,但这次稍微好一些,因为 与标签相关联。
第三个示例是最好的——实际标签被全部朗读,与输入一起朗读的标签是“姓名必填编辑文本”。
注意:您可能会得到略有不同的结果,具体取决于您的屏幕阅读器。这在 VoiceOver 中进行了测试(NVDA 的行为类似)。我们也很乐意听到您的体验。
注意:您可以在 GitHub 上找到此示例,名为 required-labels.html (也请查看在线版本). 不要使用 2 或 3 个版本中的其中一个未注释的版本测试示例——如果您有多个标签和多个具有相同 ID 的输入,屏幕阅读器肯定会感到困惑!