如何使用Pa11y 5对页面弹窗/浮层进行无障碍测试？

当然可以！Pa11y 5本身就支持通过模拟用户交互来触发弹窗，然后检测弹窗内的内容——关键是要配置正确的actions序列，确保弹窗在Pa11y开始扫描页面之前已经完全显示出来。以下是具体的实现步骤和注意事项：

核心思路 #

Pa11y会在执行完所有配置的actions之后才开始扫描页面的DOM内容。所以我们只需要通过actions模拟点击弹窗触发按钮，等待弹窗加载并可见，就能让Pa11y将弹窗内容纳入检测范围。

具体配置方法 #

1. 编写交互动作序列 #

在Pa11y的配置中添加actions数组，包含以下步骤：

• 点击触发按钮：用click element [选择器]动作点击打开弹窗的按钮，选择器可以是ID、类名或CSS选择器。
• 等待弹窗可见：用wait for element [弹窗选择器] to be visible动作，确保弹窗已经渲染并显示在页面上（这种方式比固定时长等待更可靠）。
• 可选：额外等待：如果弹窗内有动态加载的内容，可以加一个wait for [毫秒数]动作，给内容足够的加载时间。

2. 示例配置代码 #

比如你可以在Pa11y的JS配置文件中这样写：

const pa11y = require('pa11y');

(async () => {
  const result = await pa11y('https://your-target-page.com', {
    actions: [
      // 点击打开弹窗的按钮
      'click element #open-modal-button',
      // 等待弹窗容器变为可见状态
      'wait for element #modal-container to be visible',
      // 额外等待500毫秒确保弹窗内容加载完成
      'wait for 500'
    ],
    // 其他无障碍检测配置
    standard: 'WCAG2AA',
    report: 'html'
  });

  // 输出或保存检测报告
  console.log(result);
})();

如果是用命令行运行Pa11y，可以通过--actions参数传入（多个动作用逗号分隔）：

pa11y --actions "click element #open-modal-button, wait for element #modal-container to be visible, wait for 500" https://your-target-page.com

常见问题排查 #

• 选择器不准确：确保按钮和弹窗的选择器能精准匹配到目标元素，可以用浏览器DevTools验证选择器是否有效。
• 弹窗未真正显示：如果弹窗是通过display: none/visibility: hidden切换显示的，要确保动作执行后弹窗的CSS状态是可见的。
• 动态内容加载延迟：如果弹窗内有异步加载的内容，需要延长等待时间，或者添加等待内容元素出现的动作（比如wait for element #modal-content to exist）。
• 弹窗在iframe中：如果弹窗是嵌入在iframe里的，Pa11y默认不会检测iframe内容，需要额外配置includeIframes: true（注意这个选项需要Pa11y 5.1.0及以上版本支持）。

只要配置正确，Pa11y就会在弹窗显示后扫描整个页面的可见内容，包括弹窗内的HTML元素，生成包含弹窗无障碍问题的完整报告。

内容的提问来源于stack exchange，提问作者Nan