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

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

動作の仕組み

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

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

• カスタムコンポーネントを別の要素に
• カスタムコンポーネントの属性を他の要素の属性に
• カスタムコンポーネント内の属性を要素のテキスト内容に（つまり、buttonタグ内のような要素内に含まれるテキスト内容に）：<button> テキストコンテンツ </button>
• 各ARIA属性を個別に指定するのではなく、ワイルドカード属性（aria-*）を使用して、カスタムコンポーネントからWAI-ARIA属性を抽出します。

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

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

• オプションを使用します。を使用する場合は、--additional-properties customNameオプションを使用してください。
• を含めます。「を使用する場合は、リクエストボディに"properties": ["customName"]を含めてください。例については次のステップを参照してください。

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

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

1. VS Code用AxeアクセシビリティリンターまたはJetBrainsプラグインを使用する場合、VS Code用Axeアクセシビリティリンター拡張機能またはJetBrainsプラグインを使用したカスタムコンポーネントのリントを参照してください。
2. Axe DevTools Linter RESTエンドポイントを使用する場合、Axe DevTools Linter RESTエンドポイントでカスタムコンポーネントをリンティングするを参照してください。

React NativeファイルとReact Nativeカスタムコンポーネントのリントに関する情報をご覧になるには、React Native用のAxe DevTools Linterの使用を参照してください。

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

関連情報

VS Code用Axeアクセシビリティリンター、JetBrainsプラグイン、RESTエンドポイントで使用される設定についての情報は、Axe DevTools Linterの設定を参照してください。