【问题标题】:Accessibility issue with popup and aria-live弹出窗口和 aria-live 的可访问性问题
【发布时间】:2023-12-30 04:18:01
【问题描述】:

我有一条错误消息,我正在使用 aria-live = 礼貌。 这是宣布第一次出现错误。 第二次它再次宣布我是否在同一页面上打开一个弹出窗口并且该页面发生错误。

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

我无法找到它发生的原因,因为它已经向用户宣布并且弹出窗口背后的内容有 aria-hidden="true"

【问题讨论】:

  • 您使用的是哪个屏幕阅读器?这在不同的屏幕阅读器之间是否一致?

标签: javascript html accessibility


【解决方案1】:

所以问题是错误消息(aria-live)被宣布了两次?预计第一次,但如果您打开一个弹出窗口,它会宣布第二次?

如果您指定aria-live="polite"并且指定aria-relevant,那么这意味着在您更改文本时应该宣布 aria-live 区域(添加、删除或更改文本)在

(或其任何子 DOM 元素)中,或者如果您添加子 DOM 元素(但不是 remove 子 DOM 元素)。

因此,您应该确认当您显示弹出窗口时,没有子 DOM 节点被添加到您的 aria-live 区域,并且 aria-live 区域内的任何文本都没有更改。

还要检查 aria-live 区域是否被您的弹出窗口以某种方式引用。如果您的弹出窗口中有 aria-labelledbyaria-describedby 指向 aria-live 区域,则 aria-live 区域将作为弹出窗口的一部分宣布。

【讨论】:

  • 我认为这是由于 aria-relevant 而发生的,因为我在 aria-live 区域添加了 aria-hidden 属性。会不会有问题。有没有办法解决这个问题?
  • aria-hidden 属性添加到活动区域不会导致活动区域被读取。没有实际的代码可以看,很难猜出问题出在哪里
  • 我发现了我猜的问题。我的 中有一个 tabindex。我删除 tabindex 的那一刻,它开始工作。但由于 tabindex 0,我无法弄清楚它是如何发生的
  • 添加tabindex="0" 不会自动导致直播区域被宣布。它允许用户通过 TAB 键进入活动区域,此时它会被宣布,因为它具有当前键盘焦点。
最近更新 更多