AMP

网络故事中的无障碍性

故事

网络故事 是一种在网络上进行故事叙述的新颖且令人兴奋的媒介。我们坚信,让每个人都能享受故事非常重要。由于构建在 AMP 和核心网络技术之上,网络故事已经配备了对许多有用的无障碍功能的高质量支持。我们的目标是确保网络故事默认情况下是无障碍的,并且我们认识到,要实现这一目标,我们还有很多工作要做。这是我们的首要任务,在这篇博文中,我们将介绍我们的方法,并提供有关创建更无障碍的网络故事的指导。

努力实现默认无障碍性

重要的是,我们为这种新媒介建立一个明确且始终如一地满足的无障碍标准,类似于(甚至超过)人们对文章和视频的理解标准。作为起点,网络故事格式标准化了核心用户交互模型,并确保了主要用户操作(如 *从一页导航到另一页*、*分享故事* 以及 *滑动到页面附件*)默认情况下可以支持重要的无障碍功能。我们正在积极与行业专家合作,确定我们可以改进网络故事无障碍性的方法,并需要您的意见和反馈。如果您发现无障碍性问题(或对改进有建议),请在我们的 Github 存储库中提交问题。我们非常感谢您的帮助!

但是,就像所有网页一样,发布者和创作者需要认真遵循最佳实践,以确保他们的网络故事能够实现最佳的无障碍性结果。

从网络最佳实践开始

确保您的网络故事无障碍性的核心原则与所有网络/AMP 内容相同。牢记关键的无障碍性原则,并根据最佳实践评估您的故事。特别是,鉴于网络故事的视觉丰富性,重要的是要确保以下内容得到认真实施

图像的替代文本

这可能是网络上最熟悉的无障碍性最佳实践,它同样适用于网络上的故事。确保故事中的所有图像都提供有意义的替代文本描述,供无法视觉感知图像所有方面的人使用。以下是一个图像替代文本的示例

<amp-img
alt="Stack of blueberry pancakes with powdered sugar"
src="/images/pancakes.jpg"
layout="fill"
>
</amp-img>Code language: HTML, XML (xml)

故事中的一种常见模式是使用包含文本作为图像一部分的图像。为了获得理想的无障碍性结果,最好避免这种情况,但如果无法避免,请确保也提供此“嵌入”文本作为替代文本。

视频的 ARIA 标签

故事中的视频在大多数网络文档中扮演着与图像非常相似的角色。这就是为什么通常有必要提供一个`aria-label`,其功能类似于视频上的替代文本。

视频的字幕/字幕

为故事中的提供字幕和/或字幕。用户通常需要在没有音频的情况下观看故事。嵌入视频中的文本无法被屏幕阅读器和其他辅助技术使用,应替换为适当的元素。

对比度

故事是媒体丰富的,一种常见的模式是在图像或视频之上叠加文本。在执行此操作时,务必确保文本与背景具有足够的对比度。一种常见的技巧是在文本字段中使用与文本颜色形成有效对比的背景颜色。

在文本字段中使用背景颜色有助于确保文本具有足够的对比度,便于阅读

键盘可导航性

网络故事中的每一页都应建立一个清晰的信息流,无论用户是通过视觉方式还是通过辅助技术(如键盘导航)进行交互。重要的是要确保网络故事标记的组织方式反映预期的交互顺序。这可以在 DOM 的结构中自然地完成,但当这样做并不容易时,仍然可以通过 `tabindex` 属性指定焦点顺序,以遵循有意义的顺序。

无障碍性审计

虽然遵循此处描述的最佳实践是实现故事出色无障碍性的第一步,但它们并不能保证完美的结果。就像任何其他网络存在一样,我们建议执行无障碍性审计,并获得无障碍性专家的专业支持,以实现最佳结果。

总结

网络故事专为无障碍性而设计,并在整体用户体验中融入了关键功能,但依赖于故事作者遵循内容最佳实践,例如使用无障碍文本和字幕标记媒体元素,并注意重要文本的对比度。

感谢大家帮助我们使故事成为网络上一种无障碍的媒介!

作者:Varun Rao,Google 网络故事产品经理