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

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

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

Houssein Djirdeh

react-axe は、すべてのリソースを監査するライブラリです。アプリケーションに反応し、ユーザー補助の問題があれば Chrome DevTools に記録するできます。オープンソースの axe を使用します。テストライブラリを使用して、問題とその重大度をフラグ付けします。

eslint-plugin-jsx-a11y: さまざまなユーザー補助ルールを識別して適用する ESLint プラグイン直接 JSX に作成します。これを最終的なモデルをテストするツールと組み合わせて使用すると、レンダリングされた DOM（react-axe など）は、確認することもできます

なぜこれが有用なのでしょうか。

ユーザーの種類に関係なく、すべてのユーザーに提供するウェブサイトを構築することは極めて重要です。コンテンツにアクセスする能力。監査の使用 react-axe や eslint-plugin-jsx-a11y などのライブラリを、 React アプリケーションの開発では、React アプリケーションによって発生しにくくなります

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 コンソールに直接移動できます。

Chrome DevTools の React Axe

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

未成年
中
重大
重大