アクセスできない場合、React サイトはプログレッシブではありません。開発中の監査は、問題を特定するのに役立ちます。
react-axe
は、すべてのリソースを監査するライブラリです。
アプリケーションに反応し、ユーザー補助の問題があれば Chrome DevTools に記録する
できます。オープンソースの axe を使用します。
テスト ライブラリを使用して、問題とその重大度をフラグ付けします。
eslint-plugin-jsx-a11y
:
さまざまなユーザー補助ルールを識別して適用する ESLint プラグイン
直接 JSX に作成します。これを最終的なモデルをテストするツールと組み合わせて使用すると、
レンダリングされた DOM(react-axe
など)は、
確認することもできます
なぜこれが有用なのでしょうか。
ユーザーの種類に関係なく、すべてのユーザーに提供するウェブサイトを構築することは極めて重要です。
コンテンツにアクセスする能力。監査の使用
react-axe
や eslint-plugin-jsx-a11y
などのライブラリを、
React アプリケーションの開発では、React アプリケーションによって
発生しにくくなります
eslint-plugin-jsx-a11y を使用する
React では、JSX 構文内でアクセス可能な HTML 要素の記述をすでにサポートしています。対象
たとえば、for
ではなく htmlFor
属性を使用して
React コンポーネント内の特定のフォーム要素にラベルを設定します。
<input id="promo" type="checkbox">
<label htmlFor="promo">Receive promotional offers?</label>
「
React のユーザー補助機能に関するドキュメント
React 内でユーザー補助の問題を処理する方法に関するすべての微妙な違いをカバーしています。
説明します。開発中にこれらの問題を簡単に見つけられるようにするには、
React アプリ(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
を使用すると、ユーザー補助の問題を簡単に特定できます。
作成しますが、最終的な HTML 出力はテストされません。react-axe
これはまさにそのためのライブラリで、
Deque Labs が提供する axe-core
テストツール。
まず、ライブラリを開発用の依存関係としてインストールします。
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 コンソールに直接移動できます。
違反ごとに重大度も割り当てられます。その 2 つのレベルは次のとおりです。
- 未成年
- 中
- 重大
- 重大
まとめ
- React を使用してサイトを構築する場合は、 コンポーネントを構築する際の問題を検出するために、ワークフローを早期に行う必要があります。
eslint-plugin-jsx-a11y
を使用してユーザー補助チェックを lint チェックに追加する 説明します。CRA にあらかじめ含まれているが、 推奨モードか厳格モードかを指定します- ローカルでの開発テストに加えて、
react-axe
を 最後にレンダリングされた DOM に関する問題をキャッチします。含めない 製品版バンドルに組み込みます