【发布时间】：2020-10-16 23:14:50
【问题描述】：
我正在接受 a11y 无障碍 WCAG 2.0/2.1 标准的培训，我看到一些测试建议涉及在关闭 CSS 的情况下测试页面，以确保元素以对屏幕阅读器友好的顺序呈现。
有没有办法为此目的配置 e2e 测试通过以关闭 css 样式？在 cypress 内还是通过一些外部配置？
【问题讨论】：
标签： accessibility cypress end-to-end wcag2.0
【发布时间】：2020-10-16 23:14:50
【问题描述】：
该建议实际上不是一个好主意，可能已经过时了。
你看看你是否使用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 秒内找到大多数错误。这对于找出奇怪的问题也非常方便，例如段落阅读顺序错误。
盖上屏幕，打开您选择的屏幕阅读器并为自己设置一项任务，例如“填写联系方式”。
它会给你比自动化测试更多的反馈。
【讨论】：