Axe Watcher を始めよう

This page is not available in the language you requested. You have been redirected to the English version of the page.

Link to this page copied to clipboard

テストスイートで Axe Watcher を使い始める方法

Not for use with personal data

このガイドでは、既存のエンドツーエンドテストスイートに自動アクセシビリティテストを追加するための Axe Watcher のセットアップ手順をご紹介します。

Watcher と Axe Developer Hub の理解

Axe Watcher は、あなたのテストスイートに統合するための Axe Developer Hub の入力ソースであり、Axe Developer Hub はアクセシビリティ結果を表示および管理するためのウェブプラットフォームです。これらは完全なアクセシビリティテストのソリューションとして連携します。

Axe Watcherは自動テストとともに実行され、テストが訪問する各ページをアクセシビリティ問題に対して分析します。DOMの変化を検出し、複数のページ状態をキャプチャするため、シングルページアプリケーションやログインフロー、インタラクティブコンポーネントのような動的コンテンツをテストするのに最適です。Git と統合することで、Watcher は結果を特定のコミットやブランチに関連付けます。

Axe Developer Hubは Watcher などの入力ソースからアクセシビリティ結果を受け取り、整理されたインターフェースで表示します。コミットを越えたアクセシビリティ問題の追跡、ブランチの比較、重症度でのフィルタリング、およびプロジェクトのアクセシビリティ進捗の監視が可能です。プラットフォームは重複排除されるため、各ユニークな問題を一度だけ確認することができます。

設定手順

important

これらの手順は、Axe アカウントを持っており、Axe Developer Hubサブスクリプションへのアクセスがあることを前提としています。

Axe アカウントや Axe Developer Hub のサブスクリプションに関するサポートが必要な場合は、直接 Deque の担当者に連絡するか、サポートデスク、またはメールでお問い合わせください。

1. ウォッチャープロジェクトを作成する

Axe Developer Hub のプロジェクトは、アクセシビリティ結果、テスト実行情報、Git データを保持します。各プロジェクトには、テスト実行をリンクするためのユニークなプロジェクト ID があります。

プロジェクトを作成するには：

Visit the Axe Developer Hub Startup page or click 新規プロジェクトの追加 from your Projects page.
Axe Watcherを統合方法を選択ページから選択します。
プロジェクトに名前を付けます。
プログラミング言語を選択します。
ブラウザ自動化プラットフォームを選択します。

完全な手順については、プロジェクト設定をご覧ください。

2. テストスイートを修正する

Watcher の統合には、既存のテストに対する変更は最小限で済みます。一般的な手順は以下の通りです。

Watcher パッケージのインストール
設定関数およびコントローラクラスのインポート
Watcher's config 関数でブラウザ設定をラップする
ブラウザまたはページインスタンスを Watcher でラップする
各テスト後に結果をフラッシュして Axe Developer Hub に送信する

具体的な実装はプラットフォームによって異なります。以下のリンクから言語を選択して、ブラウザ自動化プラットフォームに特化した手順をご確認ください。

既存のテストスイートがない場合でも、Axe Watcher 実例リポジトリが各サポートプラットフォーム用の動作例を提供しています。

3. テストを実行し、結果を確認する

テストスイートを修正した後は、通常通りに実行します。Watcher は自動的にページを分析し、結果を Axe Developer Hub に送信します。

テスト実行が完了したら、Axe Developer Hub のプロジェクトを訪問して結果をレビューします。表示されるのは：

ブランチページ（Git プロジェクト）：スキャンされたすべてのブランチをアクセシビリティサマリーと共に表示します。
コミットページ （Gitプロジェクト）: ブランチ内のコミットを比較データとともに表示します。
テストランページ （非Gitプロジェクト）: タイムスタンプと問題数を含む各テストランを表示します。
サマリーページ: 影響による問題数とともにすべてのアクセシビリティルール違反を表示します。
詳細ページ: 要素の位置、ソースコード、および改善ガイダンスを含む各違反についての詳細情報を提供します。

結果をナビゲートするためのガイダンスについては、結果を理解するを参照してください。

次のステップ

CI/CDでのアクセシビリティチェックを自動化する: アクセシビリティエラーを含むプルリクエストをブロックするためにGitHubアクションを使用するか、RESTサービスを使用して他のプラットフォームに統合します。
テストのカスタマイズ: 分析するページを制御するための手動モードについて学びます
しきい値の設定: 組織のアクセシビリティエラーに対する許容範囲を定義するためのa11yのしきい値を設定します
グローバル設定の使用: 組織全体で一貫したアクセシビリティ基準を適用します