このページは Cloud Translation API によって翻訳されました。

remember-axe と eslint-plugin-jsx-a11y によるユーザー補助の監査

React サイトにアクセスできない場合、そのサイトはプログレッシブではありません。開発中に監査することで、問題を発見できます。

フセインジルデ

react-axe は、React アプリケーションを監査し、ユーザー補助の問題を Chrome DevTools コンソールに記録するライブラリです。オープンソースの axe テストライブラリを使用して、問題とその重大度を報告します。

eslint-plugin-jsx-a11y は、JSX で直接多くのユーザー補助ルールを識別して適用する ESLint プラグインです。これを、最終的にレンダリングされる DOM をテストするツール（react-axe など）と組み合わせて使用すると、サイト上のユーザー補助の問題を見つけて修正するのに役立ちます。

メリット

障害や制限に関係なく、すべてのユーザーがコンテンツにアクセスできるようにするウェブサイトを構築することは非常に重要です。React アプリケーションの開発中に react-axe や eslint-plugin-jsx-a11y などの監査ライブラリを使用すると、ユーザー補助の問題が出現したときに自動的に公開されます。

React ではすでに、アクセス可能な HTML 要素を JSX 構文内で記述することをサポートしています。たとえば、ラベルを React コンポーネント内の特定のフォーム要素にリンクするには、for ではなく htmlFor 属性を使用するだけで済みます。

<input id="promo" type="checkbox">
<label htmlFor="promo">Receive promotional offers?</label>

React のユーザー補助に関するドキュメントには、React コンポーネント内でユーザー補助の問題に対処する際の細かな説明が記載されています。開発中にこれらの問題を簡単に見つけられるように、Create React App（CRA）には、ESLint 用の eslint-plugin-jsx-a11y プラグインがデフォルトで含まれています。

CRA が提供する事前構成済みの lint チェックを有効にするには:

コードエディタに適した ESLint プラグインをインストールします。
プロジェクトに .eslintrc.json ファイルを追加する

{
  "extends": "react-app"
}

ユーザー補助に関する一般的な問題がいくつか表示されるようになりました。

リンターの画像のユーザー補助機能に関する警告

さらに多くのユーザー補助ルールを確認するには、プラグインが推奨するすべてのルールが自動的に含まれるようにファイルを変更します。

{
  "extends": ["react-app", "plugin:jsx-a11y/recommended"]
}

さらに厳密なルールのサブセットが必要な場合は、厳格モードに切り替えます。

{
  "extends": ["react-app", "plugin:jsx-a11y/strict"]
}

リンターのラベルのユーザー補助エラー

プロジェクトのドキュメントに、推奨モードと厳格モードの違いに関する情報が記載されています。

React-axe を使用する

eslint-plugin-jsx-a11y は、JSX のユーザー補助機能の問題を簡単に特定するのに役立ちますが、最終的な HTML 出力のテストは行いません。react-axe は、Deque Labs の axe-core テストツールの React ラッパーを提供することで、まさにそのためのライブラリです。

まず、ライブラリを開発の依存関係としてインストールします。

npm install --save-dev react-axe

これで、index.js のモジュールを初期化するだけで済みます。

if (process.env.NODE_ENV !== 'production') {
  import('react-axe').then(axe => {
    axe.default(React, ReactDOM, 1000);
    ReactDOM.render(<App />, document.getElementById('root'));
  });
} else {
  ReactDOM.render(<App />, document.getElementById('root'));
}

動的インポートは、ライブラリが本番環境モードでない場合にのみライブラリを読み込むために、ルート App コンポーネントをレンダリングして起動するために使用します。これにより、最終的な製品版バンドルに不必要に含まれるのを防ぐことができます。

開発中にアプリケーションを実行すると、問題が Chrome DevTools コンソールに直接表示されます。

Chrome DevTools での React Axe

違反ごとにも重大度レベルが割り当てられます。これらのレベルは次のとおりです。

小
中
重大
重大

まとめ

React を使用してサイトを構築する場合は、コンポーネントを構築する際の問題を早期に検出できるように、ユーザー補助の監査をワークフローに組み込みます。
eslint-plugin-jsx-a11y を使用して、lint チェックワークフローにユーザー補助機能チェックを追加します。CRA はすでに含まれていますが、推奨モードまたは厳格モードに切り替えてください。
ローカルでの開発テストに加えて、アプリに react-axe を組み込んで、最終的にレンダリングされた DOM の問題を検出します。製品版バンドルには含めないでください。

remember-axe と eslint-plugin-jsx-a11y によるユーザー補助の監査

メリット

eslint-plugin-jsx-a11y を使用する

React-axe を使用する

まとめ