事前設定済みコンポーネントライブラリ

Axe DevTools Linterには、いくつかの人気コンポーネントライブラリの組み込みサポートがあります。これを有効にすると、それらのライブラリのコンポーネントの使用は、ネイティブHTML要素と同様にアクセシビリティがテストされます。

導入

以下のパッケージによって定義されたコンポーネントが現在サポートされています。

ライブラリコンポーネントのリンティングを有効にするには、そのライブラリのNPMパッケージ名を global-libraries 配列に追加してください axe-linter.yml ファイル：

global-libraries:
  - '@mui/material'

同等のJSON構成（ RESTサービス用）は以下に示されています：

{
  "config": {
    "global-libraries": [
      "@mui/material"
    ]
  }
}

グローバルライブラリのコンポーネントと同じ名前のコンポーネントは、そのライブラリコンポーネントとして扱われ、再エクスポートおよび再宣言が可能で、マッピングを失うことはありません。

Cauldron React

Cauldron Reactのバージョン4.7.0以上が現在サポートされています。

Cauldron Reactの設定

Cauldronのマッピングを利用するには、 VS Code用Axe Accessibility Linter拡張機能 または JetBrainsプラグインに次の行を以下の axe-linter.yml ファイルに追加してください：

global-libraries:
  - '@deque/cauldron-react'

Cauldronの例

以下の例では、Cauldronの Button 要素がテキストコンテンツを含まないことで発生するアクセシビリティエラーを示しています：

<Button></Button>

Cauldronライブラリを構成に有効にした後に、IDE（例としてVS Code）内で、次のようなエラーが表示されます：

マテリアルUI

マテリアルUIのバージョン5.11.15以上が現在サポートされています。

マテリアルUIの設定

マテリアルUIのマッピングを利用するには、 VS Code用Axe Accessibility Linter拡張機能 または JetBrainsプラグイン、次の行をあなたの axe-linter.yml ファイルに追加してください：

global-libraries:
  - '@mui/material'

Material UIの例

次の例は、 **aria-colindex** がMaterial UIコンポーネント **ImageList**と一緒に誤用されているアクセシビリティエラーを示しています。

<ImageList aria-colindex="1"/>

あなたのIDE（ここではVS Codeを例とします）で、次のエラーメッセージが表示されます：

設定ファイルで **global-libraries** オプションを'@mui/material'に設定しない場合、このエラーは表示されません。

React Native

React Nativeの設定

Cauldronマッピングを VS Code用Axe Accessibility Linter拡張機能 または JetBrainsプラグインと共に使用するには、次の行をあなたの axe-linter.yml ファイルに追加してください：

global-libraries:
  - react-native

React Nativeマッピングを使用するための他のドキュメントは、次のセクションにあります： React Native用カスタムコンポーネントのLinting。

関連情報

Axe DevTools Linterの設定

カスタムコンポーネントとVS Code拡張またはJetBrainsプラグイン

カスタムコンポーネントとRESTエンドポイント

React Native用カスタムコンポーネントのLinting