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

【问题标题】：Is there a standard way to provide alt="" text for screen-readers on HTML5 ads / animations?是否有一种标准方法可以为 HTML5 广告/动画上的屏幕阅读器提供 alt="" 文本？
【发布时间】：2015-12-18 02:48:56
【问题描述】：

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

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

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

编辑：

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

【问题讨论】：

我从来没有使用过真正的屏幕阅读器，但根据fangs screen reader emulator add-on，canvas 元素不被支持，canvas 的 innerHTML 将被读取为普通 HTML。所以你可以更新 canvas.innerHTML 来提供一些 alt 内容。但是如何让屏幕阅读器知道它已经更新，我真的没有经验......
我没有使用 GSAP 的经验来回答，但我会使用一些 JavaScript 并为各种动画事件添加侦听器。 EG element.addEventListener('animationEnd',function... 请参阅 developer.mozilla.org/en-US/docs/Web/API/AnimationEvent/… 以帮助您入门
也许看到这个更新部分，未测试stackoverflow.com/questions/3670570/…
@Kaiido：嗯，所以简单地更新 innerHTML 不会触发 fangs 重新阅读它？我会测试一下，看看是不是这样。我可以想象，如果必须通过某种黑客来触发它，那将是一个挑战。
@bigp，我不认为它可以被称为 hack，因为它在规范中定义为不支持 canvas 元素的 UA 应该将其视为任何不支持的元素，并且只是将其显示为某种<div>。不知道您是否必须在画布本身或内部元素上设置 aria-live 属性。

标签： html canvas accessibility css-animations alt

【解决方案1】：

如果你像这样使用 aria-live 创建一个 live region，

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

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

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

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

也许您还可以创建一个按钮来打开/关闭通知，以便屏幕阅读器用户可以选择是否要实时听到说明。

【讨论】：

同意aria-live 是让屏幕阅读器阅读新信息的最佳方式，但在上面的代码sn-p 中，role="region" 不是必需的。这会导致<div> 成为您不需要的地标。
好点。但是，我发现了很多专门将角色设置为区域的示例。我能想到的两个原因... 1. 当您设置 aria-live="polite" 时，有时用户可能会在屏幕阅读器正在阅读其他信息时错过通知。那么 role="region" 可能会有所帮助，因此屏幕阅读器用户可以通过地标功能轻松找到特定区域并手动查看内容。 2. 可能是因为人们称之为活区？
实时“区域”很少是您需要导航到的区域。它用于向屏幕阅读器宣布事情。指定role="region" 只是使其成为地标的方法的一半。它还需要一个标签（aria-label 或aria-labelledby）。请参阅w3.org/TR/wai-aria-1.1/#region，“作者必须为每个具有角色区域的元素提供一个简短的标签，描述该区域中内容的用途”和“[区域]足够重要，用户可能想要能够轻松导航到该部分并将其列在页面摘要中”