使用Web平台测试改进网页可访问性

去年，一位同事向我介绍了Interop Accessibility 项目。我立刻对其“改善整个网络的无障碍性状态，无论平台、浏览器或辅助技术如何”的使命深感认同。该项目的使命引人注目，但从我的角度来看，它也代表着将无障碍性提升到Web平台功能层面的一次变革性示例。

深入研究后，我了解了Web平台测试 (WPT)，这是一个跨浏览器测试套件，对实现Interop Accessibility的宏伟愿景至关重要。WPT使任何人都能编写一个自动化测试，该测试可在所有主流浏览器引擎（即 Chromium、Gecko 和 WebKit）中运行，从而确保诸如HTML或ARIA (可访问富互联网应用)等网络技术按预期工作。在此之前，从未有过能够在所有浏览器和任何系统上运行的无障碍性测试。尽管在移动测试和操作系统覆盖方面存在一些限制，WPT作为实现更具可访问性和包容性的网络工具，前景广阔！

例如，以下假设测试断言<img>元素的可访问性角色是“image”

<img data-expectedrole="image" ...>

为了包容的用户体验，浏览器准确计算角色并通过平台可访问性API（HTML Accessibility API Mappings）正确暴露这些角色至关重要。角色使用户能够理解用户界面元素（例如，button、link、dialog）的用途，通过WPT，我们可以轻松验证浏览器计算的角色。

您可能会发现我们虚构的<img>示例缺少文本替代，尽管这是无障碍性所必需的。我可以添加这一点来测试通过alt属性提供的<img>文本描述是否正确暴露为其可访问性标签

<img alt="stack of fluffy pancakes" 
     data-expectedlabel="stack of fluffy pancakes"
     data-expectedrole="image" 
 ...
 >

就屏幕阅读器体验而言，我们期望这个特定的UI能正确播报为“stack of fluffy pancakes, image”。另一个展示图像按钮标签计算的假设示例

<button data-expectedlabel="Order!" ...>
    <img alt="Order!" ...>
</button>

在这里，按钮的嵌套内容（特别是<img>的alt属性）提供了按钮本身的可访问性标签，结果播报将是“Order!，button”。这些示例展示了WPT的简洁性和强大功能：只需几行标记，我们就能迅速确定Web浏览器如何暴露任何DOM元素的可访问性。

注意：对于那些有兴趣查看更复杂、真实的WPT示例的人：解决涉及隐藏节点的标签计算模糊性、调查display: contents 和 aria-label的可访问名称计算。

在底层，例如当我运行上述<img>测试时，一个JavaScript Promise函数会断言图像的可访问性角色和标签由浏览器正确计算。为此，WPT使用testharness.js（一个用于编写测试用例的JavaScript框架）和WebDriver来获取浏览器计算的关于DOM元素的可访问性元数据（目前是元素的程序化标签或角色）。大多数WPT可访问性测试也使用HTML标记和一些data-*属性（例如，data-testname、data-expectedrole）编写，这些属性为WPT测试执行和报告提供了挂钩。

测试可以使用调用浏览器自动化的CLI命令在本地运行。WPT的一个更巧妙的方面是其强大的持续集成（CI）基础设施，它每天（以及针对拉取请求）在所有主要浏览器引擎的最新版本上运行WPT仓库中的测试！测试结果存储在WPT互操作性仪表板中，便于查看并帮助浏览器工程师改进互操作性。在此特别感谢所有维护WPT CI服务器运行的人员；他们的辛勤工作提供了一个维护良好、可靠且稳定的WPT基础设施。

我希望这些WPT可访问性测试的实用性是显而易见的：当可访问性语义（例如，角色）和标签在不同浏览器之间互操作地工作，并符合开发者的意图时，这对网页开发者和用户来说都是一个胜利。更广泛地思考，如果我们能以自动化方式定期测试所有Web平台功能在最新浏览器上的可访问性行为，那会怎样？这能节省多少时间和精力？

这就是WPT如此引人注目的原因：通过使用强大、可扩展的测试框架，我们可以生成易于编写的测试，从而

• 减少本应“正常工作”的代码带来的挫败感，
• 为整个网络（包括您的用户）提供更一致、更可访问的体验，
• 揭示并消除跨浏览器差异和意外的可访问性行为，
• 防止Web平台可访问性错误的未来回归，
• 减少可访问性QA工作，并且
• 让您有更多时间专注于其他开发重点。

由于上述原因，互操作性的实用性以及WPT的最终益处再怎么强调也不为过：它让所有人共同更接近于构建一个可靠和包容网络的共同目标和愿景！

编写WPT可访问性测试的价值不仅限于确保正确的跨浏览器行为或衡量浏览器对可访问性规范的符合性。WPT测试还可以积极影响其编写所依据的标准。例如，一位同事最近为可访问名称节点遍历编写了一个WPT测试，经过调查，我们发现所有主流浏览器都以相同的方式失败（这很不寻常）。我们从这项工作中发现了多个规范模糊性，这促使了跨浏览器的修复。这个问题也引发了对几个相关主题的富有成效的讨论，所有这些都是为了追求卓越的Web可访问性和一流的用户体验。太棒了！

除了WPT测试对Web开发者的价值之外，其他好处还包括

• 浏览器供应商之间协调性的增强
• 对浏览器供应商施加更大影响，使其以互操作的方式支持Web技术
• 减少可访问性标准和规范中的实现差距
• 改进辅助技术解释代码方式的标准化
• 提供浏览器实际行为的具体证据，从而促进浏览器工程师进行修复、改进行为并实现更高的浏览器一致性

看到WPT可访问性测试随着时间的推移而发展壮大令人难以置信，我们的努力不断得到更高效的基础设施、更广泛的测试覆盖范围和强大的合作伙伴关系的支持。虽然苹果公司发挥了主导作用，但它与Adobe、Hilton、Mozilla、Google、Igalia、Bocoup等合作伙伴之间高度协作。我对该项目各个方面所展现的勤奋、技术知识和热情感到惊叹。无论是在苹果内部还是外部，对网络可访问性使命的专注和坚定承诺都具有感染力。向所有参与者致敬，并继续努力！

我对未来充满期待，它将包括更强大的WebDriver能力来检查浏览器生成的无障碍性元数据，以及通过富有成效的协作缩小Web浏览器之间的无障碍性差距。我邀请您，亲爱的读者，通过编写WPT测试，为这个更具互操作性、更可靠、更无障碍的Web未来贡献力量。请加入我们！