是否关闭CSS以进行针对可访问性的E2E测试？

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

是否有一种方法可以配置e2e测试通过以为此目的关闭css样式？是在赛普拉斯内部还是通过一些外部配置？

该建议实际上并不是一个好主意，也许已经过时了。

您会看到是否使用了flexbox之类的东西，并使用flex-direction: row-reverse来更改页面元素的顺序（例如），您的网站可能会失败WCAG 2.4.3 Focus Order。

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

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

当屏幕阅读器从可访问性树中获取其信息时，浏览器就会暴露出来（如果CSS会更改DOM元素的顺序，这会受到CSS的影响），您需要在CSS开启的情况下进行测试。

我该怎么办？

总而言之，请关闭CSS，然后可以使用Web Developer plugin之类的东西。

这是一个有用的检查，它不是要使用CSS重新排序事物，以抵消DOM顺序不正确的事实。

再一次，如果您查看原始DOM顺序，您可能会发现您认为某些东西的顺序错误，请对其进行更正，然后会错过一个事实，即CSS替换了它的顺序。

在99％的测试中，CSS保持打开状态。

更好的测试方法是在CSS中查找可能会更改顺序的任何类（float: right，flex-direction: row-reverse等），然后标识使用这些类的元素，然后看看一切是否正确。 / p>

Accessibility Insights是测试网站标签/焦点顺序的绝佳工具。这通常会导致页面排序不正确，无论是通过CSS还是DOM顺序。

其中一项测试是针对“制表位”的，所有您要做的就是启动测试并在页面上切换。

它使您可以直观地了解所关注的内容以及每个项目上的编号，以便以后查看（对于大型团队，当您需要突出特定问题时，这非常有用）。

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

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

显然，您只应该在开发周期的关键时刻执行此操作，但是一旦您精通了屏幕阅读器，就可以在30秒内找到大多数错误。这对于拾取奇怪的问题（例如以错误的顺序阅读的段落）确实非常方便。

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

与自动化测试相比，它将为您提供更多的反馈。