accessibility - 关闭CSS以进行以可访问性为中心的E2E测试？

Question

我正在接受 a11y 可访问性 WCAG 2.0/2.1 标准的培训，我看到了一些测试建议，涉及在关闭 CSS 的情况下测试页面，以确保元素以对屏幕阅读器友好的顺序呈现。

有没有办法配置 e2e 测试 channel 来关闭 css 样式来实现此目的？在 Cypress 内部还是通过一些外部配置？

Answer 1

该建议实际上并不是一个好主意，而且可能已经过时了。

您会看到，如果您使用诸如 flexbox 之类的内容，并使用 flex-direction: row-reverse 更改页面元素的顺序(例如)，您的网站可能会失败WCAG 2.4.3 Focus Order .

现在，如果您关闭 CSS，您将不会意识到这个问题(假设您的 DOM 顺序是正确的)。

DOM 顺序对于可访问性很重要(特别是当某些浏览器仅支持文本时)，我并不是说它不是，但最终用户实际需要交互的内容更为重要。

当屏幕阅读器从浏览器公开的可访问性树中获取信息时(如果更改 DOM 元素的顺序，则会受到 CSS 的影响)，您需要在打开 CSS 的情况下进行测试。

我应该做什么？

无论如何关闭CSS，你可以使用类似Web Developer plugin的东西为此。

这是一个有用的健全性检查，您不会使用 CSS 重新排序来抵消 DOM 顺序不正确的事实。

然而，如果您再次查看原始 DOM 顺序，您可能会发现您认为某些内容的顺序错误，请纠正它，然后错过它的顺序已被 CSS 交换的事实。

99% 的测试都保持 CSS 处于打开状态。

更好的测试是查找 CSS 中可能更改顺序的任何类(float: right、flex-direction: row-reverse 等)，然后识别使用这些类的元素，只是看看一切看起来是否正确。

用于测试站点选项卡/焦点顺序的一个很棒的工具是 Accessibility Insights 。这通常会发现页面的顺序不正确，无论是通过 CSS 还是通过 DOM 顺序。

其中一个测试是针对“制表位”的，您所做的就是启动测试并在页面周围制表符。

它为您提供了重点内容的视觉指示，以及每个项目的编号，以便您稍后查看它们(当您需要突出显示特定问题时，这对于大型团队来说非常有用)。

手动执行测试需要 2 分钟，到目前为止我还没有看到好的自动化解决方案，因此手动检查是可行的方法。

最好的测试

忘记自动化测试，只需启动屏幕阅读器并使用页面即可。

显然，您应该只在开发周期的关键点执行此操作，但一旦您熟练使用屏幕阅读器，您就可以在 30 秒内找到大多数错误。这对于发现奇怪的问题(例如以错误的顺序阅读段落)也非常方便。

盖上屏幕，打开您选择的屏幕阅读器并为自己设定一个任务，例如“填写联系表格”。

它会给你比自动化测试更多的反馈。