有没有办法让屏幕阅读器在渲染元素时只宣布一次？

Posted 2023-03-05

【中文标题】有没有办法让屏幕阅读器在渲染元素时只宣布一次？

【英文标题】：Is there a way to make screen reader announce only once when the element is rendered?

【发布时间】：2021-11-03 13:06:47

【问题描述】：

我有一个由 js 处理的计时器，每秒从 59 减少到 0。 我正在使用aria-live 来检测更改。但是，每次更改元素时，屏幕阅读器都会不断重复。

如何让屏幕阅读器仅在第一次渲染时宣布计时器？

【问题讨论】：

单独添加 aria-live 部分并将其隐藏，然后在您的 JS 中添加一行以在初始化计时器后更新 aria-live 区域。但是我确实想知道为什么您只想宣布一次计时器？在不了解您的用例的情况下，很难给出建议，但您不想至少每 5 秒发布一次吗？

谢谢，我会根据您的建议尝试通过 JS 处理。对于您的问题，用户报告说屏幕阅读器每秒钟播放一次会引起烦恼，并且带有计时器的消息也很长；因此，对于这种情况，我认为让屏幕阅读器第一次只宣布是可以的。

对不起，我不清楚，但我的意思是计时器的用途。由于这是一条消息，它取决于该消息是什么（即，如果它是由于不活动而导致的“注销”消息，您会希望它每隔几秒钟宣布一次，如果它只是某种 toast 消息，那么一个公告将没事的！）。还要记住，任何带有计时器的东西都需要有一个扩展选项，如果它是 WCAG 规定的关键功能（不记得它是哪个 SC，但如果你想查找它是“计时”）。

仅供参考，当登录会话还剩一分钟时，将显示一个弹出窗口。弹出窗口包含通知用户的计时器和消息。

正如我所说，您需要每 5-10 秒通知一次（与单独的 aria-live 区域和计时器循环中的计数器相同的技术）。也不是你需要一个设置屏幕来延长会话时间以完全符合 WCAG 标准，正如我在之前的评论中提到的那样。

【参考方案1】：

我之前所做的是拥有一个 视觉隐藏 容器（<div> 或 <span>），其中包含 aria-live，并且我仅每 XX 秒更新一次该容器。我还有一个 visual 容器，它每秒更新一次，从 59 倒计时到 0。这让我可以控制宣布计时器的频率。

根据您的情况，您可能希望每 15 秒更新一次活动容器（在 60 秒，首次显示时，在 45、30 和 15 秒）。然后可能在 10 和 5。然后可能每秒低于 5。

要创建视觉上隐藏的容器，请参阅What is sr-only in Bootstrap 3?。 （不需要Bootstrap，复制CSS定义直接使用即可。）

【参考方案2】：

根据您在 cmets 中的描述，听起来您正在构建一个弹出横幅或通知，以在用户的​​会话即将到期时通知用户。因此，虽然让屏幕阅读器每秒宣布一次计时器绝对不理想，但您也不能只在它第一次出现时宣布一次。如果通知出现时用户正在键入并且他们的击键中断了通知怎么办？如果用户暂时离开计算机并返回，但错过了初始通知怎么办？

我同意 Graham 的建议：在计时器倒计时时，使用 javascript 每 5-10 秒更新一次aria-live 区域。或者，您也可以使用role="alert" 强制通知，删除role="alert" 并每隔5-10 秒添加一次（WCAG 建议至少20 秒）。无论哪种方式，都必须通知用户他们的会话即将到期，并且必须为他们提供延长会话的选项。这属于WCAG 2.1 guideline 2.2.1: Timing Adjustable。