Html Aria label无法在Chrome和Firefox中使用NVDA

我有一个简单的文本框：

<input type="text" aria-label="First Name" title="First Name" />

我在文本框悬停时显示工具提示

名字

我使用了

aria标签

以及

aria标签

，但两者都不适用于Chrome或Firefox

它正在处理文本框的选择，但不处理鼠标悬停

但它在IE鼠标悬停和文本框选择上运行良好

---

我正在使用屏幕阅读器NVDA。

我在Firefox和Chrome上使用NVDA进行了测试，我可以确认屏幕阅读器没有在

输入上宣布
aria标签的值

我查看并发现
aria label
不支持
input
元素，但是
aria labelledby
和
aria descripedby
是。摘自上面的链接：

aria labelledby和aria describedby对于交互式内容元素（如链接和表单控件，包括许多输入类型）提供了强有力的支持

所以我修改了这个代码片段在Chrome和Firefox上与NVDA一起工作的代码

<input type="text"  aria-labelledby="label" />
<span id="label">First Name</span>


名字

确保将
输入
和“标签”放在
表单
内，以使其最佳工作
 为避免混淆，为输入添加标签的正确方法是简单地使用

所以你应该

<label for="firstName">First Name</label>
<input id="firstName" name="firstName" type="text"/>

名字

它对文本框的选择起作用，但对鼠标悬停不起作用

它不适用于鼠标悬停

NVDA读取鼠标悬停时的输入元素，而不是

如果你想阅读某个东西，你必须添加一个标签。
删除“标题”，你不需要工具提示，你需要一个实际的标签。@GrahamRitchie不起作用我知道这不能解决你的问题，
title
不是一个好主意，仅此而已。人们如何知道字段是关于什么的，您是否没有输入的实际标签？您是否有更完整的示例，因为我可能无法解决您的问题，但我可以帮助您使输入/表单可访问且符合WCAG，目前我有一种感觉，大多数屏幕阅读器都无法正常工作，但我从这一行代码中猜到了。你需要为屏幕阅读器的输入应用相应的
标记，以便阅读和aoda合规性为什么你要使用
而不是
，并使用
for=
链接它们，您这样做的方式意味着当您按下“标签”时，它不会聚焦
。请删除代码示例，这样我就可以给你一个+1，指出
aria label
对输入不起作用。@GrahamRitchie我知道，但OP询问如何使它与
aria label
一起工作，所以我假设他不能使用
，当然使用
label
是最好的，但很明显，OP不能在他的案例中使用它。如果他能使用span，他没有理由不能使用标签。虽然我不同意这样做的设计，但我理解不想要一个可见的标签，但没有理由使用span而不是标签，而是有很多理由使用标签而不是span（语义、链接在一起、可维护性、W3C HTML5兼容等）。因为它们可以以相同的方式设置样式，所以我看不到在标签上使用跨度的有效用例。@StefanyNewman:您给出的示例不起作用。我们是否需要像在JAWS中一样在NVDA中进行任何设置更改。您给出的示例不起作用。我们是否需要像在JAWS中一样在NVDA中进行任何设置更改。如果您使用第一个示例（不隐藏标签），它应该可以工作。然而，我认为您过于关注这一特定功能，因为这不是屏幕阅读器用户将如何使用该软件，如果您点击输入，它将正确宣布，如果您有一个可见的标签，它将正确宣布。没有标签的输入，我根本不希望它宣布，如果它这样做是不期望的行为，这将是一个特殊的浏览器/屏幕阅读器配对的怪癖。我给出的fiddle是在没有可见标签的情况下处理输入的正确且可接受的方法。根据，aria label
定义了一个字符串值，用于标记当前元素。NVDA应将此值视为标签，而不仅仅是可访问的名称。如果没有，那就是一只虫子。