ブラウザJavaScriptに対するAxe DevTools for Webのテスト作成
Axe DevTools for Webを使ってアクセシビリティの効果的なテストを書く方法
Axe DevToolsを使ったテストの作成
前提条件
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ライブラリをReactテストライブラリと統合する方法を示します。
ツールをインポートしてテストファイルに初期化したら、アクセシビリティテストを追加するのは簡単です。以下のコードスニペットはJavaScriptで書かれており、TypeScript .tsxファイルでもそのままコンパイルされます。サンプルファイルセクションでは、両方の言語でのテスト全体を示しています。
test('Component has no accessibility violations', () => {
const {container} = render(<Badcomp></Badcomp>);
AxeDevTools.run(container, (err, results) => {
expect(results.violations.length).toBe(0);
done();
});
});このテストケースは、React Testing Library のコンテナユーティリティ内にコンポーネントをレンダリングし、その後、Axe DevTools がアクセシビリティ違反をスキャンします。この例では、あらゆる種類のアクセシビリティ違反がゼロであることを期待していますが、これは組織のニーズに合わせて変更可能です。スキャン結果の利用方法については、スキャン後に返される結果オブジェクトについてのガイドをお読みください。
サンプルファイル
このサンプルファイルでは、Axe DevToolsをReactテストライブラリと共に使用し、ツールの使用方法を具体的に説明します。同じテストがJavaScriptとTypeScriptで示されています。Axe DevTools APIはどちらも同じで、TypeScript版では、.tsxファイルに記述され、コンテナとスキャン結果が注釈付きで表示されます。
JavaScript
import React from 'react';
import Badcomp from '../components/badcomp';
import { render } from '@testing-library/react';
import { AxeDevTools } from '@axe-devtools/browser';
import "babel-polyfill"
describe('Bad Component', () => {
beforeEach(function(done) {
AxeDevTools.init('wcag2', function() {
done();
});
});
test('Component has no accessibility violations, w/ attest reporter', (done) => {
const {container} = render(<Badcomp></Badcomp>);
AxeDevTools.run(container, (err, results) => {
expect(results.violations.length).toBe(0);
done();
});
});
});TypeScript
import React from 'react';
import Badcomp from '../components/badcomp';
import { render } from '@testing-library/react';
import { AxeDevTools } from '@axe-devtools/browser';
import type { AxeResults } from 'axe-core';
import "babel-polyfill"
describe('Bad Component', () => {
beforeEach((done: jest.DoneCallback) => {
AxeDevTools.init('wcag2', () => {
done();
});
});
test('Component has no accessibility violations, w/ attest reporter', (done: jest.DoneCallback) => {
const container: HTMLElement = render(<Badcomp></Badcomp>).container;
AxeDevTools.run(container, (err, results: AxeResults) => {
expect(results.violations.length).toBe(0);
done();
});
});
});次のステップ
アクセシビリティスキャンを無事に完了したので、次に進んでレポートの生成や結果オブジェクトの利用といった高度なスキャニングのトピックに取り組む準備ができました。
トラブルシューティング
スキャン結果を取得する上でのトラブルが発生した場合は、Dequeの担当者に直接連絡するか、サポートデスク経由で連絡するか、メールを送るしてください。喜んでお手伝いします。