ホームページ > 記事 > ウェブフロントエンド > Cypress を使用した自動アクセシビリティ テスト: 包括的なガイド
アクセシビリティは Web 開発の重要な側面であり、障害のあるユーザーを含むすべてのユーザーが Web アプリケーションを効果的に操作できるようにします。自動化されたアクセシビリティ テストは、開発プロセスの早い段階でアクセシビリティの問題を特定して修正するのに役立ちます。この投稿では、Cypress を使用して自動アクセシビリティ テストを実装し、cypress-axe などのツールを活用してアプリケーションをより包括的にする方法を検討します。
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}`); }); }); });
Cypress と cypress-axe を使用した自動アクセシビリティ テストは、Web アプリケーションがすべてのユーザーにアクセスできることを確認する強力な方法です。アクセシビリティ チェックをテスト プロセスに統合することで、問題を早期に特定して修正し、より良いユーザー エクスペリエンスを提供し、アクセシビリティ標準への準拠を確保できます。このガイドで概説されているベスト プラクティスに従って、アプリケーションをより包括的でアクセスしやすいものにします。
テストをお楽しみください!
以上がCypress を使用した自動アクセシビリティ テスト: 包括的なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。