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

big*_*igp 6 html accessibility canvas alt css-animations

在创建 HTML5 动画时,是否有一种技术可用于“同步”替代文本,以便屏幕阅读器读取出现时出现的给定元素(或由事件/时间线驱动)?

理想情况下,我可以用 GSAP 调用的东西(将它用作我的项目的动画库)。

或者这样的事情是否只会让屏幕阅读器过于频繁地重复说话和暂停,最终听起来比实际增强用户体验更令人沮丧?我是否会更好地将所有正在进行的动画的“脚本”粘贴在alt="..."属性的一行上?

编辑:

这个问题主要针对 HTML5 广告 - 所以我假设必须有一种非侵入性的方式来屏幕阅读动画中发生的事件,而不需要用户实际点击广告以获得焦点(这会不由自主地打开广告所指的链接)。同时,如果用户正在阅读一篇文章/只对页面的另一个区域感兴趣,那么“强制关注”广告的动态文本是否属于某种用户违规行为?这引发了许多其他问题!

jl3*_*303 3

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

<div role="region" id="announce" aria-live="polite">
Run Code Online (Sandbox Code Playgroud)

并在正确的时间用 JavaScript 更新里面的内容,屏幕阅读器将在内容更新时宣布内容。

以下是有关实时区域的更多信息。

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

如果您想为站点用户隐藏内容,可以使用此技术。

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

也许您还可以创建一个按钮来打开/关闭公告,以便屏幕阅读器用户可以选择是否想要实时听到描述。

  • 实时“区域”很少是您需要导航到的区域。它用于向屏幕阅读器宣布事情。指定一个“role=”region“”只是使其成为里程碑的一半。它还需要一个标签(“aria-label”或“aria-labelledby”)。请参阅 https://www.w3.org/TR/wai-aria-1.1/#region,“作者 **必须** 为具有角色区域的每个元素提供一个简短的标签,描述该区域中内容的用途”以及“[区域]非常重要,用户可能希望能够轻松导航到该部分并将其列在页面摘要中” (2认同)