html5 – 如何防止JAWS在必填字段上说“无效输入”？

当使用 HTML5属性标记带有必填字段的表单时,Firefox(或其他可能的)中的JAWS 14会在用户第一次关注它们(即第一次用户遇到该字段)时将空字段宣告为“无效条目”.

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

使用aria-required =“true”避免了令人讨厌的消息(JAWS仍然通知用户该字段是必需的),但是您丢失了HTML5表单验证功能(防止表单提交,浏览器生成的工具提示以指导用户等) .

>你如何解决“无效条目”公告？
>为什么JAWS这样做？
如果用户跳过它(将其留空,因此无效),然后再重点关注,我将理解将字段描述为“无效”.目前的实施是令人困惑的,因为用户被告知他们在一个他们甚至不知道存在的领域中输入错误.

我已经阅读了关于使用JavaScript设置aria无效的黑客来欺骗JAWS,但我真的希望避免在具有许多输入的页面上的每个单个字段上观看用户交互(焦点事件等).目前我使用< label>标签文本< span style =“display：none;”>必需字段< / span>< / label>但这是一个非常黑客,非语义的解决方案(更不用说我失去了HTML5所需的好处).

解决方法

FYI …这是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.

现在,您可以同时使用所需要的和aria需求,以及一个占位符.

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

原文地址：https://www.jb51.cc/html5/168203.html