如何防止 JAWS 在必填字段上说“无效条目”？

Posted 2023-05-07

【中文标题】如何防止 JAWS 在必填字段上说“无效条目”？

【英文标题】：How to prevent JAWS from saying "invalid entry" on required fields?

【发布时间】：2013-12-21 13:59:24

【问题描述】：

当使用 html5 属性标记带有必填字段的表单时，Firefox（以及可能的其他人）中的 JAWS 14 在用户第一次关注空字段时（即用户第一次遇到字段）。

<input type="text" required value="">

使用aria-required="true" 可以避免讨厌的消息（JAWS 仍然会通知用户该字段是必填的），但是您会失去 HTML5 表单验证功能（阻止表单提交、浏览器生成的工具提示来引导用户等）。

如何绕过“无效条目”通知？ JAWS 为什么要这样做？ 如果用户跳过它（将其留空，因此无效）然后再次关注它，我会理解将字段描述为“无效”。当前的实现令人困惑，因为用户被告知他们在一个他们甚至不知道存在的字段中输入了错误。

我已经阅读了有关使用 javascript 设置 aria-invalid 以欺骗 JAWS 的黑客攻击，但我真的很想避免在具有许多输入的页面上的每个字段上观察用户交互（focus 事件等）。目前我使用<label>Label text <span style="display:none;">required field</span></label>，但这是一个非常hacky、非语义的解决方案（更不用说我失去了HTML5 required 的好处）。

【问题讨论】：

你试过同时使用 required 和 aria-required 吗？

是的，它仍然显示“无效条目”。

我使用jaws 已经有15 年了。虽然我对您的问题没有答案，但我已经习惯于在输入任何不再令人困惑的数据之前将字段宣布为无效。我假设大多数 Jaws 用户已经达到了这一点，所以如果您的应用程序不是主要为视觉障碍用户设计的，那么修复这可能不值得您花时间。

根据 Jared 的评论，无论如何它正在成为惯例，所以不用担心。但是， display: none 也会对屏幕阅读器隐藏“必填字段”，这是您的意图吗？

@AlastairC 是的，我的意思是隐藏该文本，实际上 JAWS 确实会读取它，只要它在 <label> 内。

【参考方案1】：

仅供参考...这是 JAWS 13/14 和其他屏幕阅读器中的一个已知问题，如本文所述：Accessible Forms 2: Required Fields and Extra Information。

将 JAWS 13/14、NVDA 2012.3 和 WindowsEyes 8.1 与 Firefox 20 一起使用时 （可能还有其他浏览器）HTML5“无效条目”消息是 浏览表单时为每个必填表单字段显示 在浏览模式下或在表单模式下从输入到输入的选项卡。自从 此警告在输入之前出现 可能会让一些用户感到困惑。

现在，您可以同时使用 required 和 aria-required 以及占位符。

<label for="theInput">Label Text (required):</label>
<input type="text" name="theInput" id="theInput" required="required" aria-required="true" placeholder="the Input" value="" /> 

【讨论】：

当关注具有“required”和“aria-required”属性的必需输入时，此解决方案是否摆脱了 JAWS 读取“Invalid Entry”的问题？尽管为我使用了这两个属性，但 JAWS (v16) 仍然显示“无效条目”。有什么想法吗？

即使您添加 aria-required 和占位符 attr，这也不起作用。屏幕阅读器仍会宣布无效条目。

【参考方案2】：

“invalid-entry”是由 required 属性引起的。相反，您可以使用 aria-required=true。使用此解决方案，您可以摆脱 JAWS 和 NVDA 的“无效条目”。

要获取已知问题的完整列表，请查看此 link 到 Paciello Group 的博客文章