在带有 Popup / Overlay 的页面上使用 Pa11y 5 进行可访问性测试

Question

我有一个页面，我可以使用操作从 Pa11y 5 获取可访问性测试报告。

当我点击那个特定页面上的一个按钮时，我得到一个 popup/overlay，我希望 Pa11y 嗅探那个 popup/overlay 页面并报告可访问性指标，但目前 Pa11y 5 只有能够为我提供主父页面而忽略弹出页面中 html 上的任何报告吗？有没有办法实现这一点，告诉 Pa11y 切换到弹出窗口并嗅探该弹出窗口 html 并报告。

Popup/overlay 包含 div[role='dialog']，因为它是由 aria 组成的模态对话框。

我使用的是最新的 Pa11y，因此我一直将其称为 Pa11y 5。我没有使用过 Pa11y4，因此无法评论它是否适用于 Pa11y 4。

任何 help/advise 由衷感谢。

更新： 根据要求，下面是我的完整（相关）部分代码

const PageOptions1 = {  
    timeout: 30000,
    userAgent: 'A11Y TESTS',
    actions: [
        'screen capture screenshots/001-DefaultView.png'                    
    ]
};
const PageOptions2 = {
    timeout: 35000, 
    userAgent: 'A11Y TESTS',
    rootElement: 'div[role="dialog"]',
    actions: [
        'click element button[data-automation-id="ccbutton"]',
        'wait for element div[role="dialog"] to be added',
        'screen capture screenshots/002-Popup.png',
        'click element i.fa-close',
        'screen capture screenshots/002-DefaultView.png'
    ]
};

async function runPa11y(navigateUrl) {
    try {
        const results = await Promise.all([
            pa11y(navigateUrl, PageOptions1),
            pa11y(navigateUrl, PageOptions2),           
        ]);

        LogResults(results);
    } catch (error) {
        console.error("Error: " + error.message);
    }
}

runPa11y("Url to navigate");

Answer 1

感谢您的更新！您正在做正确的事情，一切看起来都在按预期工作。

Pa11y 将在运行你的测试之前执行所有的操作，因此它打开模态对话框，立即再次关闭它，然后运行没有它的测试。

将 PageOptions2 分成更小的单元，这样您的最后一个 Action 就是您要测试的状态，一切都应该没问题。

在带有 Popup / Overlay 的页面上使用 Pa11y 5 进行可访问性测试

Accessibility Testing using Pa11y 5 on a page with Popup / Overlay

javascript

pa11y