React サイトにアクセスできない場合、そのサイトはプログレッシブではありません。開発中に監査することで、問題を発見できます。
react-axe
は、React アプリケーションを監査し、ユーザー補助の問題を Chrome DevTools コンソールに記録するライブラリです。オープンソースの axe テスト ライブラリを使用して、問題とその重大度を報告します。
eslint-plugin-jsx-a11y
は、JSX で直接多くのユーザー補助ルールを識別して適用する ESLint プラグインです。これを、最終的にレンダリングされる DOM をテストするツール(react-axe
など)と組み合わせて使用すると、サイト上のユーザー補助の問題を見つけて修正するのに役立ちます。
メリット
障害や制限に関係なく、すべてのユーザーがコンテンツにアクセスできるようにするウェブサイトを構築することは非常に重要です。React アプリケーションの開発中に react-axe
や eslint-plugin-jsx-a11y
などの監査ライブラリを使用すると、ユーザー補助の問題が出現したときに自動的に公開されます。
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 コンソールに直接表示されます。
違反ごとにも重大度レベルが割り当てられます。これらのレベルは次のとおりです。
- 小
- 中
- 重大
- 重大
まとめ
- React を使用してサイトを構築する場合は、コンポーネントを構築する際の問題を早期に検出できるように、ユーザー補助の監査をワークフローに組み込みます。
eslint-plugin-jsx-a11y
を使用して、lint チェック ワークフローにユーザー補助機能チェックを追加します。CRA はすでに含まれていますが、推奨モードまたは厳格モードに切り替えてください。- ローカルでの開発テストに加えて、アプリに
react-axe
を組み込んで、最終的にレンダリングされた DOM の問題を検出します。製品版バンドルには含めないでください。