html - 如何防止 JAWS 在必填字段上说 "invalid entry"？

Question

当使用 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>但这是一个非常棘手的非语义解决方案(更不用说我失去了 HTML5 required 的好处)。

Answer 1

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

When using JAWS 13/14, NVDA 2012.3 and WindowsEyes 8.1 with Firefox 20 (and maybe some other browsers) the HTML5 ‘invalid entry’ message is presented for each required form field when arrowing through the form in browse mode or tabbing from input to input in forms mode. Since this warning appears before an entry has been made it could be potentially confusing for some users.

现在，您可以同时使用 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="" />