ARIA - 在屏幕阅读器(NVDA / Windows)中跳过读取输入值

时间:2017-06-09 14:16:42

标签: html5 aurelia wai-aria nvda

我正试图找到一种方法让屏幕阅读器像Windows讲述人的NVDA停止读取输入值并仅读取aria-describedby

在这种情况下,我有一个web组件,它是一个mask-input字段。假设它配置的电话掩码设置为(___) ___-____,其中下划线只能是数字。现在,屏幕阅读器会读取left parens, 3 lines, right parens, space...等等,然后读取我设置的aria-describedby值,这类似于“电话号码,1231231234”,它使用我的组件的未屏蔽值。 / p>

我想要的是,屏幕阅读器只会说“电话号码,1231231234”这是我的aria-describedby值并跳过其余部分以便它保持简短并避免说出可能使受损用户感到困惑的事情。

有点背景,也许这可以改变一点响应,我的组件是用Aurelia构建的,我正在利用绑定系统来更新值。

这可能吗?我有几个替代方案?我完全偏离了我想要实现的目标吗?

谢谢!

1 个答案:

答案 0 :(得分:1)

使用此方法无法保持可访问性。屏幕阅读器读取输入字段的内容非常重要,否则当用户键入数字时,它不会告诉他们这个数字是什么 - 如果他们决定回去一个角色或转发一个角色,值将读取标签而不是他们输入的内容。我想你正在使用的输入掩码是使用javascript替换用户在keypress上提交的掩码字符?

通常最佳做法是概述标签或与标签关联的描述性文本中所需的输入格式。这将允许有视力的用户轻松匹配所需的格式,并允许视觉上禁用的用户使用他们的键盘来导航输入值,同时充分了解所需的格式。我把一个快速的例子拼凑在一起。



<label for="textInput">Phone Number</label>
<span id="phoneDesc">Please use the following format: (xxx)xxx-xxxx</span>
<input id="textInput" type="text" aria-describedby="phoneDesc" />
&#13;
&#13;
&#13;

调查输入掩码的一般可用性也是有帮助的 - 很多人往往觉得它们很麻烦。 https://www.nngroup.com/articles/stop-password-masking/

如果您决定使用它们,请注意不要采用与您的线路不同的方法。基于方法,也许尝试一下politespace(我没试过这个,但是值得根据你的需求进行评估) https://github.com/filamentgroup/politespace