错误以及错误消除后的可访问性问题

时间:2018-11-06 14:18:11

标签: javascript html accessibility wai-aria

我有一个称为angular的组件,并且正在使用aria-live,如下所示。

<div aria-live="polite">
<error-component></error-component>
</div>

此错误显示在输入字段的焦点之外。 现在第一次出现错误时,屏幕阅读器会读取错误。现在,我将焦点移回输入字段,没有进行任何更改,我就模糊了该字段。因此,这次屏幕阅读器不会读出相同的错误。 我尝试使用与咏叹调相关的方法,但无法解决问题。 我的另一个问题是假设用户输入正确的值,然后消除错误。屏幕阅读器是否应该告诉用户特定的错误已消除?

2 个答案:

答案 0 :(得分:0)

这可能不会改变您的结果,但是可能的咏叹调实时设置为:offpoliteassertive,而不是true

Simple Live Regions

  

通常,仅使用aria-live =“ polite”。任何接收到的区域   对用户而言很重要的更新,但更新不那么快   令人讨厌的是,应该接收此属性。屏幕阅读器   每当用户闲置时都会说出更改。

<div aria-live="polite">
<error-component></error-component>
</div>

没有特别要求告知用户错误已得到纠正,但是可能很高兴。

编辑:我看到您已经编辑了自我的答案以来<div aria-live="true">之前的代码

答案 1 :(得分:0)

对于第一个问题,这是一个很普遍的行为,尽管不是通用的,如果连续两次添加/设置相同的文本,则不重新读取aria-live区域,无论使用aria-live = polite还是aria-live =断言。 有时有可能通过清除然后重新设置文本来愚弄此行为,但这并不总是有效。

在全球范围内,您不能反对。保证只有当新文本与当前文本不同时,才始终读取新文本。

与咏叹调有关的内容在这里没有帮助。它只是告诉您是否必须说出添加和/或删除,而不必说一次或两次说出两个完全不同的添加/重置。

对于第二个问题,您可以使用与咏叹调相关的信息,以便也通知删除。但是,它不是最佳解决方案。 首先,因为某些浏览器和屏幕阅读器组合并不总是很好地支持与咏叹调相关的功能。 但是更重要的是,因为您有针对此特定情况的更可靠,更受用户认可的解决方案。

要了解某个字段何时是错误或不再错误的情况,请使用 aria-invalid 。在字段变为无效时进行设置,只要不正确地填写字段就保持设置,理想情况下,一旦输入再次正确就删除属性。 许多屏幕阅读器会立即宣布有效和无效之间的变化,或者在最坏的情况下,每次关注该字段时都会宣布无效。

关于aria-invalid的唯一注意事项是,如果用户尚未输入任何内容,或者只是在不更改初始值的情况下进行制表,则应避免将该字段设置为无效。 同样,您应避免在页面加载时将字段直接变成红色。

增加的精度:aria-invalid仅允许说字段无效,它不允许您设置消息。为此,您可以继续使用单独的咏叹调活动区域,也可以使用aria- describeby。 aria-bybyby的优点是消息可以按需重复,但只能应用于特定字段(请勿用于涉及整个表单的错误或一次包含多个字段的错误)。 / p>