是否有一种标准方法可以在 HTML5 广告/动画上为屏幕阅读器提供 alt="" 文本？

Question

创建 HTML5 动画时，是否有一种技术可用于 "synchronize" 替代文本，以便 screen-readers 读取出现的给定元素出现（或由事件触发/时间线驱动）？

理想情况下，我可以使用 GSAP 调用的东西（将其用作我项目的动画库）。

或者这样的事情是否只会让屏幕 -reader 过于频繁地重复说话和暂停，最终听起来比实际提升用户体验更令人沮丧？我是否最好只在 alt="..." 属性的一行上基本上粘贴所有正在进行的动画的 "script"？

编辑：

这个问题主要针对 HTML5 广告 - 所以我假设必须有一种非侵入性的方式来屏幕读取动画中发生的事件，而不需要用户实际点击广告以获得焦点（这会不由自主地打开广告所指的 link）。同时，如果用户正在阅读一篇文章/只对页面的另一个区域感兴趣，那么对广告的动态文本 "force focus" 是否会构成某种用户违规行为？这引发了很多其他问题！

Answer 1

如果你像这样用 aria-live 创建一个实时区域，

<div role="region" id="announce" aria-live="polite">

并在适当的时候用JavaScript更新里面的内容，屏幕reader会在内容更新时公布。

这里是关于直播区域的更多信息。

https://www.w3.org/TR/2008/WD-wai-aria-practices-20080204/#LiveRegions

如果你想为站点用户隐藏内容，你可以使用这个技巧。

https://webaim.org/techniques/css/invisiblecontent/

也许你也可以创建一个按钮来打开 on/off 通知，这样屏幕 reader 用户可以选择是否想实时听到描述。

是否有一种标准方法可以在 HTML5 广告/动画上为屏幕阅读器提供 alt="" 文本？

Is there a standard way to provide alt="" text for screen-readers on HTML5 ads / animations?

html

accessibility

canvas

alt

css-animations