介绍

辅助功能是 Web 开发的一个重要方面，确保所有用户（包括残障人士）都可以与您的 Web 应用程序有效交互。自动化可访问性测试有助于在开发过程的早期识别和解决可访问性问题。在这篇文章中，我们将探讨如何使用 Cypress 实现自动化可访问性测试，利用 cypress-axe 等工具使您的应用程序更具包容性。

为什么可访问性很重要

1. 法律合规性： 确保您的应用程序符合法律要求，例如《美国残疾人法案》(ADA) 和《网页内容可访问性指南》(WCAG)。
2. 用户体验：改善所有用户（包括残障用户）的整体用户体验。
3. 包容性： 展现对包容性和多样性的承诺，使您的应用程序可供更广泛的受众使用。
4. SEO 优势： 改进搜索引擎优化，因为搜索引擎更青睐可访问的网站。

在 Cypress 中设置自动可访问性测试

为了在 Cypress 中执行自动化可访问性测试，我们将使用 cypress-axe 插件，它将 Axe 可访问性引擎与 Cypress 集成。

第 1 步：安装 Cypress 和 cypress-axe
首先，确保您的项目中安装了 Cypress。如果没有，可以使用以下命令安装：

npm install cypress --save-dev

接下来，安装cypress-axe插件：

npm install cypress-axe --save-dev

第2步：配置cypress-axe
在 cypress/support 目录中创建一个名为commands.js的新文件，并添加以下代码以导入和配置cypress-axe：

import 'cypress-axe';

Cypress.Commands.add('injectAxe', () => {
    cy.window({ log: false }).then(window => {
        let axe = require('axe-core');
        window.eval(axe.source);
    });
});

Cypress.Commands.add('checkA11y', (selector = null, options = null, violationCallback = null, skipFailures = false) => {
    cy.window({ log: false }).then(window => {
        let document = window.document;
        return axe.run(document, options).then(({ violations }) => {
            if (violations.length) {
                cy.wrap(violations, { log: false }).each(violation => {
                    let nodes = Cypress._.get(violation, 'nodes', []);
                    Cypress._.each(nodes, node => {
                        let target = Cypress._.get(node, 'target', []);
                        if (target.length) {
                            Cypress._.each(target, target => {
                                cy.wrap(target, { log: false }).then($target => {
                                    if (!skipFailures) {
                                        Cypress.log({
                                            name: 'a11y error!',
                                            message: violation.help,
                                            consoleProps: () => violation
                                        });

                                        violationCallback && violationCallback(violation);
                                    }
                                });
                            });
                        }
                    });
                });
            }
        });
    });
});

第 3 步：创建辅助功能测试
现在，让我们创建一个 Cypress 测试来检查网页的可访问性。在cypress/e2e目录中创建一个名为accessibility.spec.js的新文件并添加以下代码：

describe('Automated Accessibility Testing with Cypress', () => {
    beforeEach(() => {
        cy.visit('/');
        cy.injectAxe();
    });

    it('should have no detectable accessibility violations on load', () => {
        cy.checkA11y();
    });

    it('should have no detectable accessibility violations on specific elements', () => {
        cy.checkA11y('header');
        cy.checkA11y('main');
        cy.checkA11y('footer');
    });
});

在此示例中，我们对整个页面以及页眉、主要内容和页脚等特定元素执行可访问性检查。

自定义辅助功能检查

您可以通过提供选项和配置规则来自定义可访问性检查。例如，您可以忽略某些规则或仅运行特定检查。

示例：忽略特定规则

cy.checkA11y(null, {
    rules: {
        'color-contrast': { enabled: false }
    }
});

示例：运行特定检查

cy.checkA11y(null, {
    runOnly: {
        type: 'tag',
        values: ['wcag2a', 'wcag2aa']
    }
});

处理辅助功能违规

您可以通过提供回调函数来记录或处理违规行为来处理可访问性违规。例如：

cy.checkA11y(null, null, (violations) => {
    violations.forEach((violation) => {
        cy.log(`${violation.id} - ${violation.description}`);
        violation.nodes.forEach((node) => {
            cy.log(`Node: ${node.target}`);
        });
    });
});

可访问性测试的最佳实践

1. 尽早集成：在开发过程中尽早集成可访问性测试，以更快地发现问题。
2. 定期测试：作为 CI/CD 管道的一部分定期运行可访问性测试，以确保持续合规性。
3. 教育您的团队： 教育您的开发团队了解无障碍最佳实践和指南。
4. 使用手动测试：结合自动和手动测试以涵盖可访问性的所有方面，因为自动化工具可能无法捕获所有内容。

结论

使用 Cypress 和 cypress-axe 进行自动化可访问性测试是确保所有用户都可以访问您的 Web 应用程序的强大方法。通过将可访问性检查集成到测试过程中，您可以及早发现并修复问题，提供更好的用户体验并确保符合可访问性标准。遵循本指南中概述的最佳实践，使您的应用程序更具包容性和可访问性。

测试愉快！