ブラウザJavaScriptのインポートと初期化

Axe DevTools for Webをインストールしたら、それをテストセットアップにインポートし、パッケージを初期化する必要があります。

前提条件

Axe DevTools for Webをインポートして初期化するためには、まずインストールする必要があります。まだインストールしていない場合は、あなたのアーティファクトリポジトリからやDequeのAgoraからでインストールガイドをご覧ください。

インポートと初期化

ブラウザパッケージは、バンドルされたテストスイート内で実行することを目的としているため、JavaScriptとTypeScriptの両方でESモジュール構文でインポートされます。@axe-devtools/browserは独自の型宣言を提供しているので、別途@types/パッケージをインストールする必要はありません。

JavaScript

import { AxeDevTools } from '@axe-devtools/browser';

TypeScript

インポート文は同じです。スキャンが返す結果を注釈したい場合は、axe-coreからAxeResults型を追加します。

import { AxeDevTools } from '@axe-devtools/browser';
import type { AxeResults } from 'axe-core';

初期化

ブラウザパッケージをインポートしたら、テストしたいルールセットで初期化します。この文は両方の言語で同じです。

AxeDevTools.init('wcag2');

ルールセット引数は必須であり、TypeScriptはそれをサポートされているルールセットIDと照合します: wcag2、wcag21、wcag22、wcag2aaa、wcag21aaa、wcag22aaa、508、en301549、ttv5、rgaav4。

次のステップ

Axe DevToolsをインストールし、インポートし、初期化したら、アクセシビリティのスキャンとアクセシビリティテストの記述に進む準備が整います。それを行うには、テストを書くのガイドをご覧ください。

トラブルシューティング

Axe DevToolsのインポートや初期化に問題がある場合は、Dequeの担当者に直接連絡するか、私たちのサポートデスクを通じて、またはメールを送るでご連絡ください。喜んでお手伝いします。