ブラウザ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テストライブラリと統合する方法を示します。

ツールをインポートしてテストファイルに初期化したら、アクセシビリティテストを追加するのは簡単です。以下のコードスニペットは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の担当者に直接連絡するか、サポートデスク経由で連絡するか、メールを送るしてください。喜んでお手伝いします。