Axe DevTools for Webへようこそ

Deque Systemsでは、Axe DevTools for Webを開発し、開発プロセスにおける自動アクセシビリティテストの統合を容易にしました。私たちは、自動化されたアクセシビリティテストを通じてアクセシビリティの欠陥を未然に防ぐことが、アクセシブルな製品を作る最も効率的で持続可能な方法であると信じています。

Axe DevTools for Webは、最も人気のあるオープンソースのアクセシビリティテストエンジンである私たちのaxe-core製品を基に構築されています。

Axe DevTools for Webの構成要素

Axe DevTools for Webは、開発プロセスのさまざまな段階でアクセシビリティテストを統合するのに役立つ以下のコンポーネントで構成されています。

• Axe Developer Hub: プラットフォーム全体でアクセシビリティテストを統合
• Axe DevTools Linter: コードを書きながらアクセシビリティ問題を発見
• Axe DevToolsブラウザー拡張機能: ブラウザーからアクセシビリティをチェック
• Axe Watcher: 既存のWebテストスイートに迅速にアクセシビリティテストを追加
• Web APIs: アクセシビリティテストを自動化
• CLI: コマンドラインからアクセシビリティをチェック

Axe Developer Hub: プラットフォーム全体でアクセシビリティテストを統合

DequeのAxe Developer Hubは、開発ワークフロー全体で複数のソースからの結果を集約する包括的なアクセシビリティテストプラットフォームを提供します。Webアプリケーションやモバイルアプリをテストする場合や、Axe DevTools for Web APIsと統合する場合でも、Axe Developer Hubはあなたのデジタルエコシステム全体におけるアクセシビリティの問題を一元的に把握できるようにします。詳細については、Axe Developer Hubへようこそをご覧ください。

Axe DevTools Linter: コードを書きながらアクセシビリティ問題を発見

VS Code MarketplaceからAxe Accessibility Linter for VS Codeをダウンロードできます。コードを書いているときに使用することで、他のリンターと同様にアクセシビリティの問題を即座に知らせてくれます。

Axe DevTools Linterは、JetBrains IDE（IntelliJ IDEA UltimateおよびWebStorm）向けのプラグインとしても利用可能です。詳細はJetBrains IDEでのAxe Linterプラグインの利用をご覧ください。

Axe DevToolsブラウザー拡張機能: ブラウザーからアクセシビリティをチェック

Axe DevToolsブラウザー拡張機能は、Chromeウェブストア、Edgeアドオンサイト、Firefoxアドオンサイトから直接ダウンロードできます。この拡張機能は、各ブラウザーの開発者ツールに統合されており、すべてのアクセシビリティ欠陥の最大80%を発見するのに役立ちます。

Axe DevToolsブラウザー拡張機能の使い始め方や使用方法について学ぶには、このビデオプレイリストをご覧ください。

Axe DevToolsブラウザー拡張機能のドキュメントを見るには、Axe DevTools拡張機能をご覧ください。

Axe Watcher: 既存のWebテストスイートに迅速にアクセシビリティテストを追加

Axe WatcherをAxe Developer Hubと併用することで、アクセシビリティテストの導入が簡単になります。Axe Watcherを使用すると、わずかなコードを変更するだけで既存の自動テストスイートにアクセシビリティテストを追加できます。テスト中にアクセシビリティのスキャンを自動で行い、Gitコンテキスト（コミット、ブランチ、作成者）と共に失敗結果をキャプチャし、集中管理とレポートのためにAxe Developer Hubに結果を送信します。JavaScript/TypeScriptおよびJavaのテストスイートに対応しています。

Axe Watcherについて詳しく学ぶには、Axe Watcherのドキュメントをご覧ください。

Web APIs: 既存のテストスイート内でのアクセシビリティテストの詳細な制御

Axe DevTools for Web APIs（Web APIsと略称）は、UI（エンドツーエンド）テストの自動化プロセスの一環としてアクセシビリティの問題をテストするのに役立ちます。当社のAPIを使用することで、Selenium、Puppeteer、Playwrightといったブラウザードライバーや、Cypress、Jasmine、Jest、JUnit、Karma、Protractor、Robot Framework、unittestなど、多くのテストフレームワークで使用するテストにおいてアクセシビリティ問題を見つけることができるようになり、CIプロセスでの検出が可能になります。

Web APIsは、Axe WatcherとAxe Developer Hubを使用するよりもテストプロセスに対する詳細な制御を提供します。（ただし、詳細な制御を得るためにはセットアップ時間とメンテナンスが増加します。）Web APIsはAxe Watcherよりも多言語対応を提供し（C#、Python、Rubyを含む）、

既に使用しているテストドライバーまたはテストフレームワークと併用するために、どのAxe DevTools for Webパッケージが必要かを見つけるには、サンプルカタログを参照してください。このカタログは、必要なパッケージを特定するだけでなく、GitHubからクローンしてローカルで実行できるサンプルプロジェクトへの案内もします。まずサンプルを試すことをお勧めします。ローカルで動作するようになったら、自分のプロジェクトに自動アクセシビリティテストを統合するのがより簡単になります。

CLI: コマンドラインからアクセシビリティをチェック

もしあなたのチームがまだ多くの自動UIテストを持っていない場合、コマンドラインインターフェース (CLI) ツールaxe（通常単にCLIと呼ばれる）は、ウェブサイトまたはウェブアプリケーションの主要なユーザーフローにアクセシビリティテストを追加するための良いオプションかもしれません。CLIは、指定されたページを読み込んだり（その組み込みのスクリプト言語を通じて）、フォームを記入したり、テストユーザーの資格情報でログインしたり、React、Vue、Angularなどのフレームワークで構築されたページの異なる状態を露出させたりするためにスクリプト化できます。また、異なるブレークポイントでのレスポンシブサイトを自動的にテストするために非常に貴重であり、Web APIの結果と同様にその結果をAxe Developer Hubにアップロードすることができます。CLIを始めるには、クイックスタートガイドをお読みください。

Web APIおよびCLIのためのAxe DevToolsのバイナリへのアクセス

Web APIおよびCLIのためのAxe DevToolsのバイナリを取得する方法は2つあります。

1. 私たちのアーティファクトリポジトリから直接。必要なファイルをダウンロードページからダウンロードできます。WebのためのAxe DevToolsの例では、サンプルプロジェクトのダウンロードリンクや、お気に入りのサンプルのドキュメントを見ることができます。

   note

   ダウンロードページまたはアーティファクトリポジトリにアクセスするには、Axeアカウントを使用してログインする必要があります。あなたの資格情報はウェルカムメールにあります。

2. 組織のアーティファクトリポジトリを私たちのリポジトリに接続することで、パッケージマネージャーがWebパッケージのためのAxe DevToolsに関するすべての依存関係を解決できるようにします。NexusリポジトリまたはArtifactoryリポジトリへの接続方法については、私たちのインストラクションをご覧ください。

ヘルプを受ける

質問がある場合や始めるのにサポートが必要な場合、私たちはここにいます。どうぞメールを送る、喜んでお手伝いします。

さらに、あなたのウェルカムメールには、担当のカスタマーサクセスマネージャー (CSM) の連絡先情報が含まれています。彼らもまた、あなたが自身の製品にアクセシビリティテストを組み込むのを助ける準備が整っています。

---

Note: It is never necessary to use Deque's software or services in a way that collects, stores, or shares personal data. Do not use the software or services in a manner that collects, stores, or shares personal data.