开放网络之所以强大，是因为它能使每个人都能访问相同的信息。这意味着无论人们的位置、硬件偏好、语言或能力如何，网络都需要为所有人而设计。AMP 通过UI 和无障碍工作组投资这项工作，其目标是确保所有 AMP 体验都默认符合 WCAG AA。这意味着 AMP 不仅让您轻松创建无障碍网站，还更进一步，确保创建无障碍体验不是默认结果。
这篇博文重点介绍了 AMP 项目在创建无障碍组件方面所做的一些工作，以及开发人员在创建网络体验时应牢记的一些关键原则和工具。
启用无障碍网站
在设计 AMP 组件时，无障碍是一个重要的早期考虑因素。我们的设计评审和实施意向流程专注于确保我们发布的组件不会排除具有不同无障碍需求的人员。这使得 AMP 能够创建符合 W3C WCAG 2.0、级别A 和 AA 指南的页面，而这些指南是国际上考虑无障碍性的法律的重要组成部分。
但是，与任何其他框架一样，虽然 AMP 允许您创建无障碍体验并提供提示这样做，但我们无法强制使用 AMP 的所有网站都符合 WCAG 指南。例如，虽然 <amp-img> 允许您指定备用文本，但我们不会强制所有图像都具有备用文本；即使我们这样做，我们也无法强制所提供的字符串实际上是图像的描述，而无需运行广泛的机器学习模型。
我们如何减少开发人员的工作量
以下是团队为使常用的 AMP 组件和操作默认情况下可访问而做的部分繁重工作。
- 使用 on=”tap.action”处理程序单击和轻触事件：除了尊重移动设备“轻触”和桌面鼠标单击事件之外，AMP `tap` 事件还尊重通过空格键或 `Enter` 进行键盘激活，用于带可轻触“角色”属性注释的多个元素。
- <amp-sidebar>：在实现 <amp-sidebar> 时，团队最关心的问题是焦点管理。这就是为什么 <amp-sidebar> 在打开时将焦点移动到侧边栏，并在关闭时自动将焦点移动到开启器的原因。它还为通过屏幕阅读器与组件交互的用户提供了可聚焦的“关闭”模态。
- <amp-carousel>: 对于 <amp-carousel> 版本 0.2，当屏幕阅读器访问时，下一页和上一页按钮始终会播报当前幻灯片和幻灯片的总数。
- <amp-list>: 默认情况下，<amp-list> 会向列表元素添加列表 ARIA 角色，并向通过模板呈现的项目元素添加 listitem 角色。如果列表元素或其任何子元素不可聚焦或“可通过 Tab 键访问”（可通过键盘键（如 a 和按钮元素或任何具有正 tabindex 的元素）访问），则会默认向列表项添加 0 的 tabindex。这会使它们通过屏幕阅读器显式可访问。
- <amp-autocomplete>: <amp-autocomplete> 组件会注释其生成的建议，以播报输入字段将显示建议，并完全支持通过键盘在建议中导航并选择建议。当有建议可用时，用户可以使用 `向上` 和 `向下` 箭头键导航来以可视方式突出显示完成的输入，或对于屏幕阅读器，朗读它们。
我们打算在未来做什么
由于无障碍是 UI 和无障碍工作组 的首要任务，我们计划在未来持续投入，以改善 AMP 的默认无障碍功能。下面是我们打算开展的一些主题
- 通过添加有关无障碍测试的指南来改进我们的 贡献文档，任何贡献组件的人员都需要进行无障碍测试。
- 改进 AMP 组件文档，以明确记录组件获得正确的无障碍功能，以及开发人员需要自己完成的附加工作（例如为页面上的所有视频添加字幕）。
AMP 团队认为有用的无障碍资源
为了确保您的网站符合 WCAG AA 指南，我们建议使用以下工具来自动化您的测试。
- axe-core: 一个用于网站的无障碍测试引擎，它与任何现有的测试环境集成，以便您可以将无障碍测试与常规功能测试一起自动化。
- WAVE: 通过在页面内提供无障碍问题的可视化表示，来促进 Web 无障碍评估的工具。
- Lighthouse CLI: Chrome Lighthouse 基于 axe-core 来发布有关网站无障碍程度的报告。
- W3C 在 此处 建议的其他 Web 无障碍评估工具。
但是，自动化工具无法始终发现所有问题，最好的办法是让了解 WCAG 指南的开发者检查您的标记和 CSS，以确保使用最佳实践。
和往常一样，如果您有任何问题或功能请求，尤其是无障碍空间方面的问题，请告诉我们。
AMP 项目产品经理 Naina Raisinghani 发布