14

当使用 HTML5 属性来标记带有必填字段的表单时，Firefox（以及可能的其他人）中的 JAWS 14 会在用户第一次关注空字段时（即用户第一次遇到该字段）宣布空字段为“无效条目”。

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

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

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

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

4

2 回答 2

2

仅供参考...这是 JAWS 13/14 和其他屏幕阅读器中的一个已知问题，如本文所述： 可访问表格 2：必填字段和额外信息。

在将 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="" />
于 2015-05-18T21:45:52.150 回答
2

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

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

于 2019-05-07T00:57:12.870 回答