Node.jsおよびブラウザベースのテストのためのAxe DevTools for Web
Axe DevTools for Webで利用可能なNode.jsおよびJavaScript統合の概要
このページでは、Node.jsおよびJavaScript開発向けのAxe DevTools for Webのオプションを紹介します。以下にある各項目は、それがドキュメント化しているnpmパッケージの名前を示しているので、参照されたパッケージをそれに対応するガイドで確認することができます。
以下にリストされているすべてのパッケージにはそれぞれ固有のTypeScript型宣言が含まれているため、別の@types/パッケージをインストールする必要はなく、Axe DevTools APIはどちらの言語でも同じです。各インテグレーションのインポートおよびテスト作成ガイドでは、例が言語別にラベル付けされ、JavaScriptとTypeScriptの両方で完全なサンプルファイルが提供されています。
これらのパッケージはすべて同じレジストリからインストールされます。認証とインストール手順についてはDequeのAgoraからNode.js用のAxe DevTools for Webをインストールを参照してください。
どのパッケージを選んでも、スキャンはデフォルトでWCAG 2.1レベルAAに従って実行され、ベストプラクティスと実験的なルールは無効になっています。ルールセットを変更したり、ベストプラクティスを有効にしたりするには、ルールのカスタマイズを参照してください。
テストフレームワークの統合
お使いのテストツールに合ったパッケージを選択してください。各ガイドには、インストール、インポートと初期化、テストの作成方法、完全なAPIリファレンスが含まれています。
- ブラウザ JavaScript（
@axe-devtools/browser） - Cypress（
@axe-devtools/cypress） - Playwright JavaScript（
@axe-devtools/playwright） - Puppeteer（
@axe-devtools/puppeteer） - WebdriverIO（
@axe-devtools/webdriverio） - WebDriverJS（
@axe-devtools/webdriverjs）
レポートとロギング
これらのパッケージは、上記のいずれのテストフレームワーク統合とも一緒に動作します。
- Node Reporter（
@axe-devtools/reporter）：アクセシビリティの結果から報告書を生成します。 - Node Logger（
@axe-devtools/logger）：テストの実行中にアクセシビリティ結果をログに記録します。
他の統合
カスタム要素と ElementInternals
Axe DevTools for Web 4.13.0 から、スキャンは JavaScript を通じてウェブコンポーネントが宣言する ARIA セマンティクスをElementInternalsから読み取ります。これにより、マークアップに存在するroleおよびaria-*属性だけに限定されません。設定は不要であり、このページのすべての統合に適用されます。DOM 内のセマンティクスが依然として優先されます。要素上の明示的なroleまたはaria-*属性がElementInternalsからの値を上書きします。
これが有効になるには、コンポーネントがその内部を公開する必要があり、プライベートクラスフィールドにそれらを格納するコンポーネントは読み取ることができません。ElementInternals を使用するカスタム要素のテストを参照してください。