導入

アクセシビリティは Web 開発の重要な側面であり、障害を持つユーザーを含むすべてのユーザーが Web アプリケーションを効果的に操作できるようにします。自動化されたアクセシビリティ テストは、開発プロセスの早い段階でアクセシビリティの問題を特定して修正するのに役立ちます。この投稿では、Cypress を使用して自動アクセシビリティ テストを実装し、cypress-axe などのツールを活用してアプリケーションをより包括的にする方法を検討します。

アクセシビリティが重要な理由

1. 法的遵守: アプリケーションが米国障害者法 (ADA) やウェブ コンテンツ アクセシビリティ ガイドライン (WCAG) などの法的要件を満たしていることを確認します。
2. ユーザー エクスペリエンス: 障害を持つユーザーを含むすべてのユーザーの全体的なユーザー エクスペリエンスが向上します。
3. 包括性: 包括性と多様性への取り組みを示し、より幅広いユーザーがアプリケーションにアクセスできるようにします。
4. SEO の利点: 検索エンジンはアクセス可能なウェブサイトを優先するため、検索エンジンの最適化が向上します。

Cypress での自動アクセシビリティ テストのセットアップ

Cypress で自動アクセシビリティ テストを実行するには、Ax アクセシビリティ エンジンを Cypress と統合する cypress-axe プラグインを使用します。

ステップ 1: Cypress と cypress-axe をインストールする
まず、プロジェクトに Cypress がインストールされていることを確認します。そうでない場合は、次のコマンドを使用してインストールできます:

npm install cypress --save-dev

次に、cypress-axe プラグインをインストールします:

npm install cypress-axe --save-dev

ステップ 2: cypress-axe を構成する
cypress/support ディレクトリに command.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: アクセシビリティ テストを作成する
次に、Web ページのアクセシビリティをチェックする 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 アプリケーションがすべてのユーザーにアクセスできることを確認する強力な方法です。アクセシビリティ チェックをテスト プロセスに統合することで、問題を早期に特定して修正し、より良いユーザー エクスペリエンスを提供し、アクセシビリティ標準への準拠を確保できます。このガイドで概説されているベスト プラクティスに従って、アプリケーションをより包括的でアクセスしやすいものにします。

テストをお楽しみください!