ブラウザJavaScriptに対するAxe DevTools for Webのテスト作成
This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard
Axe DevTools for Webを使ってアクセシビリティの効果的なテストを書く方法
Not for use with personal data
Axe DevToolsを使ったテストの作成
前提条件
Axe DevToolsを使用してページをテストするには、まずプロジェクトにインポートし初期化する必要があります。このステップがまだ完了していない場合は、このガイドを参照してその方法を確認してください。
このガイドは、ユーザーがこのAxe DevToolsライブラリをReactテストライブラリと統合する方法を示します。
ツールをテストファイルにインポートし、初期化すると、アクセシビリティのテストを追加することは次のように簡単です：
test('Component has no accessibility violations', () => {
const {container} = render(<Badcomp></Badcomp>);
axeDevTools.run(container, (err, results) => {
expect(results.violations.length).toBe(0);
done();
});
});このテストケースでは、コンポーネントをReactテストライブラリのコンテナユーティリティ内にレンダリングし、その後、Axe DevToolsがアクセシビリティ違反をスキャンします。この例では、いかなる種類のアクセシビリティ違反もないことを期待していますが、これは組織のニーズに応じて変更できます。スキャン結果の使用方法について詳しくは、スキャン後に返される結果オブジェクトに関するガイドを参照してください。
サンプルファイル
Axe DevToolsとReactテストライブラリを使用したこのサンプルファイルは、ツールの使用方法を理解するのに役立ちます。
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();
});
});
});次のステップ
アクセシビリティスキャンを無事に完了したので、次に進んでレポートの生成や結果オブジェクトの利用といった高度なスキャニングのトピックに取り組む準備ができました。
トラブルシューティング
スキャン結果を取得する上でのトラブルが発生した場合は、Dequeの担当者に直接連絡するか、サポートデスク経由で連絡するか、メールを送るしてください。喜んでお手伝いします。