カスタムコンポーネントのリンティング

この記事では、Axe DevTools Linterを使用してカスタムコンポーネントをリンティングする方法の概要を紹介します。

動作の仕組み

カスタムコンポーネントのリンティングは、カスタムコンポーネントを既存の要素にマッピングします。例えば、 <custom-image> コンポーネントが <img> HTML要素を出力する場合、 custom-image と img の間にマッピングを作成し、Axe DevTools Linterがカスタムコンポーネントを img 要素としてリンティングできるようにします。この場合、例えば altが 不足している 属性 を検出し、それをアクセシビリティのエラーとしてフラグを立てることができます。

次のようなマッピングを作成できます：

• カスタムコンポーネントを別の要素に
• カスタムコンポーネントの属性を他の要素の属性に
• カスタムコンポーネントの属性を要素のテキストコンテンツ（例えば button タグ内のテキストコンテンツ）に <button> テキストコンテンツ </button>のように
• WAI-ARIA 属性をカスタムコンポーネントからワイルドカード属性（aria-*）を使用して指定する代わりに

カスタムコンポーネントの違反の分析

カスタムコンポーネントの設定が増えるにつれて、アクセシビリティレポートでの違反がカスタムコンポーネントのマッピングからなのか、標準のHTML要素からなのかを判別するのが難しくなることがあります。Axe DevTools Linterは、レポート内の各一致する違反にカスタムコンポーネントの名前を追加でき、カスタムマッピングの影響を識別しやすく分析できます。

• Axe DevTools Linter Connector を使用する場合、 オプションを使用します。 --additional-properties customName RESTエンドポイント
• を使用する場合、リクエストボディに を含めます。「RESTエンドポイントでカスタムコンポーネントをリンティングする方法 "properties": ["customName"] 」をご覧ください。例があります。 次のステップ カスタムコンポーネントのリンティングを開始するのに役立つ2つのウォークスルーがあります。

VS CodeのAxe Accessibility LinterまたはJetBrainsプラグインを使用する場合、「

VS CodeのAxe Accessibility Linter拡張またはJetBrainsプラグインでカスタムコンポーネントをリンティングする方法

1. 」を参照してください。 Linting Custom Components with the Axe Accessibility Linter Extension for VS Code or the JetBrains Plugin.
2. Axe DevTools LinterのRESTエンドポイントを使用する場合は、「 Axe DevTools Linter RESTエンドポイントでカスタムコンポーネントをリンティングする」をご覧ください。

React NativeファイルのリンティングおよびReact Nativeのカスタムコンポーネントのリンティングに関する情報が必要な場合は、「 React Native用のAxe DevTools Linterの使用」をご覧ください。

人気のあるカスタムコンポーネントライブラリに対するAxe DevTools Linterのサポートについては、「 事前設定されたコンポーネントライブラリ」をご覧ください。

関連情報

「 Axe DevTools Linterの設定 」をご覧ください。そこには、Axe Accessibility Linter for VS Code、JetBrainsプラグイン、RESTエンドポイントで使用される設定に関する情報が記載されています。