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

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

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

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

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

ユーザーの種類に関係なく、すべてのユーザーに提供するウェブサイトを構築することは極めて重要です。 コンテンツにアクセスする能力。監査の使用 react-axeeslint-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 を有効にするには:

  1. お使いのコードエディタに適した ESLint プラグインをインストールします。
  2. プロジェクトに .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 つのレベルは次のとおりです。

  • 未成年
  • 重大
  • 重大
で確認できます。

まとめ

  1. React を使用してサイトを構築する場合は、 コンポーネントを構築する際の問題を検出するために、ワークフローを早期に行う必要があります。
  2. eslint-plugin-jsx-a11y を使用してユーザー補助チェックを lint チェックに追加する 説明します。CRA にあらかじめ含まれているが、 推奨モードか厳格モードかを指定します
  3. ローカルでの開発テストに加えて、react-axe を 最後にレンダリングされた DOM に関する問題をキャッチします。含めない 製品版バンドルに組み込みます