为避免混淆，标记输入的正确方法是简单地使用<label>。

所以你应该拥有

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

链接标签和输入的方法是使用for属性，并将其指向输入的ID。

这样做的另一个好处是，如果单击label，它将聚焦于相应的input，而其他解决方案则不会。

如果由于某种原因您需要输入不带标签的输入，那么以下示例说明了如何正确执行此操作。 （请不要这样做，如果可以避免的话，标签对于焦虑症患者能够检查他们是否填写了正确的字段很重要-但是我知道有时候“设计师”只是不会让步，您必须解决它们。...）

在此示例中，我们使用CSS“可视地隐藏”标签，并将placeholder文本添加到元素中。只是重申这是那些不听辅助功能的设计师的最后选择，您应该使用可见的标签。

至少这样做，对于屏幕阅读器用户，输入将正确运行。

.visually-hidden { 
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6,IE7 */
    clip: rect(1px,1px,1px);
    white-space: nowrap; /* added line */
}

<label for="firstName" class="visually-hidden">First Name</label>
<input id="firstName" name="firstName" placeholder="First Name" type="text"/>

编辑

最后有机会进行测试，可以在Firefox，Internet Explorer上运行，而不能在Chrome上悬停发布。

但是，如果标签可见，它确实可以正常工作（如果将标签悬停，即使有可见标签，它也不会宣布是否将输入本身悬停了），如果您focus input。

最后的想法-显示标签（我第三次在一个答案中说这句话。呵呵），问题已解决，无需使其复杂化。

此外，我不确定您为什么认为这很重要，如果有人在使用鼠标的同时使用屏幕阅读器来帮助他们单击输入，那么我从来没有遇到过会发现没有阅读表单字段的人单击该字段后，如果它可以正常工作，将悬停在可访问性问题上。

唯一可能受此影响的人是：-

• 屏幕阅读器用户
• 使用鼠标的人
• 有视力障碍的人
• 使用Google Chrome浏览器的人
• 还使用NVDA的人，
• 并且不要使用屏幕放大镜。

非常具体，因此不太可能是问题。

它可用于选择文本框，但不适用于鼠标悬停。

这不适用于鼠标悬停。

NVDA会在鼠标悬停时读取label的输入元素，而不是accessible name.

如果您想阅读某些内容，则必须添加标签。

我已经在Firefox和Chrome上使用NVDA进行了测试，并且可以确认屏幕阅读器没有在aria-label上宣布input的值

我查看了2.10 Practical Support: aria-label,aria-labelledby and aria-describedby，发现aria-label元素不支持input，但是aria-labelledby和aria-describedby受支持。来自上面的链接：

交互式内容元素（例如链接和包含许多输入类型的表单控件）得到了强大的

aria-labelledby和aria- describeby支持。

因此，我更改了此代码段与Chrome和Firefox上的NVDA一起使用的代码。

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

请确保将input和“ {label””放在form内，以使其发挥最佳作用。