Axe DevTools for Web 用 WebDriverJS API リファレンス

コンストラクタ

標準構成では、Axe DevTools のコンストラクタに渡す必要がある唯一の引数は WebDriverJS インスタンスです。元々含まれているものとは異なる axe-core バージョンやカスタムルールセットを使用する場合は、これらのオプションをコンストラクタに渡すことができます。

Axe DevTools WebDriverJS コンストラクタ:

AxeDevToolsBuilder(driver:WebDriver, String:ruleset|Object:axe (optional))

最初の引数として Selenium WebDriver のインスタンスを渡す必要があります。2つ目のオプション引数は、ルールセットIDまたは axe オブジェクトのいずれかです。2番目の引数を指定しない場合は、@axe-devtools/script-builder のカスタムルール設定ファイルを構成しなければなりません。そうしないと、コンストラクタで例外がスローされます。

以下の例は、コンストラクタの使用方法を示しています:

// instantiate with the Section 508 rule set
const builder = new AxeDevToolsBuilder(driver, '508');

// or with a specific axe instance
const axe = require('../axe-core-2.3.0');
const builder = new AxeDevToolsBuilder(driver, axe);

カスタムルール

Axe DevTools for Web でカスタムルールを使用する方法についての情報は、カスタムルールセットの生成と統合に関するガイドを参照してください。 CLI ガイド。

分析

この analyze() メソッドは分析を実行し、アクセシビリティスキャンの結果を返します。

analyze(): Promise<axe.AxeResults>

指定されたクライアントでデフォルトの構成を使用して分析を実行します。 Promise が返され、axe-core によって返されるアクセシビリティ結果セットで解決されます。

analyzeUniversal

この analyzeUniversal() メソッドは分析を実行し、 Axe Universal Formatで結果を返します。既存の analyze() メソッドは変更されません。

analyzeUniversal(): Promise<UniversalExport>

チェーンオプション

Axe DevTools のスキャンの対象範囲を設定するために2つのオプションがあります。特定の CSS スコープを含めるか除外するかを選択できます。コンストラクタ上で下記のチェーンメソッドを使用することでこれが可能です。

含める

new AxeDevToolsBuilder(driver).include('<CSS-Selector>');

分析に含める要素のリストに CSS セレクタを追加します。 include() のスコープ外の要素はスキャンされません。

除外する

new AxeDevToolsBuilder(driver).exclude('<CSS-Selector>');

分析から除外する要素のリストに CSS セレクタを追加します。 exclude() のスコープ外の要素のみがスキャンされます。

これらのメソッドは、以下のようにスキャン範囲をさらに絞り込むためにチェーンできます。

new AxeDevToolsBuilder(driver).include('<CSS-Selector>').exclude('<Inner-CSS-Selector>');

この例では、 <CSS-Selector> 内のすべての要素がスキャンされますが、 <Inner-CSS-Selector>内の要素はスキャンされません。

ルール設定

ルール設定メソッドは標準のルール設定を上書きします。これらのメソッドを追加で呼び出すと、以前の呼び出しが上書きされます。

withRules

この withRules() メソッドは指定されたルールIDを持つルールのみに分析を制限します。単一のルールIDのための文字列または複数のルールIDのための配列を受け入れます。

以下の例は、 withRules を単一のルールID及び複数のルールIDの配列で使用する方法を示しています:

//with a single rule ID
AxeDevToolsBuilder(driver).withRules('html-lang');

//with an array of rule IDs
AxeDevToolsBuilder(driver).withRules(['html-lang', 'image-alt']);

withTags

この withTags() メソッドは提供されたタグに関連付けられたルールのみに分析を制限します。以下に示すように、単一のタグまたは複数のタグの配列を受け入れます:

//with a single tag
AxeDevToolsBuilder(driver).withTags('wcag2a');

//with an array of tags
AxeDevToolsBuilder(driver).withTags(['wcag2a', 'wcag2aa']);

disableRules

AxeDevToolsBuilder.disableRules(rules: RuleID[]): AxeDevToolsBuilder

この disableRules() メソッドは、分析を実行する際に提供されるルールの配列をスキップさせます。

axe-core オプション

オプション

.options(options: Axe.RunOptions)

この options メソッドは、axe.runが使用するオプションを指定します。これは他のすべての設定済みオプションを上書きし、 withRules への呼び出しも含みます。 withTags詳細は axe-core API ドキュメント を参照してください。

new AxeDevToolsBuilder(page).options({
  checks: { 'valid-lang': ['orcish'] }
});

構成設定

.configure(config: Axe.Spec)

この configure メソッドは、分析前にルールセットを変更するためのaxe設定オブジェクトを挿入します。このメソッドへの後続の呼び出しは、 axe.configure() を呼び出して設定オブジェクトを置き換えることにより、以前のものを無効にします。 axe-core API ドキュメント でオブジェクトの構造を確認してください。

次の例では、新しいaxe-core設定を作成し、それをAxe DevToolsに渡してスキャンに使用します：

const config = {
  checks: [Object],
  rules: [Object]
};
const results = await new AxeDevToolsBuilder(page).configure(config).analyze();

使用サービス

デフォルトでは、使用サービスは無効になっており、デフォルトのURLは https://usage.deque.comです。

環境変数

これらの環境変数を使用して、使用サービスを構成し、報告されるイベントのプロパティを変更することができます。

トラッキングの有効化

このメソッドを使用すると、ユーザーはデータを使用サービスに送信することを選択できます。

.enableTracking(state: boolean)

AxeDevToolsBuilder(driver).enableTracking(true)

トラッキングURLの設定

このメソッドを使用すると、使用メトリクスデータが送信される場所を変更できます。

.setTrackingUrl(url: string)

AxeDevToolsBuilder(driver).setTrackingUrl('https://foobar.biz')

識別IDの設定

このメソッドを使用すると、保存または使用される識別IDを変更できます。

.setDistinctId(distinctId: string)

AxeDevToolsBuilder(driver).setDistinctId('foobar')