Javascript 如何停止屏幕读取器读取所有错误span标记，该标记具有role="；警惕；？

我正在为我的移动应用程序使用Chrome Vox屏幕阅读器。此读卡器读取包含

role=“alert”

的所有错误span标记，我希望屏幕读卡器只读取第一个错误（role='alert'）。例如，我们可以看到Gmail帐户注册页面。如何实现这种情况？

如果您在每个错误输入旁边放置跨距，那么这些跨距实际上不应该有role=alert，而是ID。然后输入将需要aria describedby=该ID。您可能需要一条消息警报，指出存在错误，并将焦点放在那里，或将焦点放在第一个与错误相关的输入上，选择等等

如果您希望在表单顶部有一个错误框，并且想要一个摘要，您可以将重点放在错误上，并制作一个带有指向输入的锚（文本解释错误）的列表。此操作不需要警报角色

---

如果你只是想提醒用户有错误，你可以在一个包含role=alert和aria live=assertive的容器中放一个短语，然后关注第一个输入错误。

我必须解决同样的问题，最好的解决方案是根本不要对错误消息使用

role=alert

。相反，对可以验证的元素使用

aria descripbeby

，并将其指向包含错误消息的范围

这将确保读取焦点中元素的错误消息

与警报相比，这种方法更加用户友好，因为错误消息不会立即读取（如问题中所述），这可能会造成混淆。在页面中导航时，将读取焦点元素的错误消息

例如：

用户名未知

还有一些提示：

• 通过设置

  aria invalid=true

  属性，向屏幕阅读器提示元素包含错误
• ARIA 1.1定义了“ARIA errormessage”属性，一旦广泛使用该属性，就可以使用该属性代替由描述的ARIA

---

您正在寻找属性选择器吗？i、 e$（“[role='alert']”？您应该在运行时为所需元素添加属性role='alert'。A11y只读取第一个role='alert'元素，即使存在许多div元素。A11y只读取最后一个role='alert'元素，即使存在许多span元素。因此，您可以尝试将span更改为div，使其仅读取第一个元素。谢谢Nick，我正在尝试使用aria descripeby属性。它按照我的要求工作得很好。但是，如果我们导航到表单中的另一个输入控件，然后再次返回到具有aria describedby的同一个输入，它不会再次读取。我要注意的是，对于真正的最终用户来说，ChromeVox并不是一个非常常见的屏幕阅读器。已经注意到，它在aria等方面的功能不太好。webaim当前调查中有3%的受访者表示使用桌面上的ChromeVox.on，并且没有列出移动设备。目前手机的主要竞争对手：VoiceOver 56.7%Android对讲17.8%Nuance Talks 4.5%aria describedby将在屏幕阅读器聚焦该元素时工作。屏幕阅读器通常由盲人或色盲人士使用，其目的是在屏幕加载时发出警报，以便用户能够以最小的努力知道错误是什么，否则用户必须检查所有元素，然后用户将找到错误元素。