VS CodeまたはJetBrains IDE用Axeアクセシビリティリンターでカスタムコンポーネントをリントする
VS CodeまたはJetBrains IDEでカスタムコンポーネントをリントする手順
この記事では、Visual Studio Code (VS Code)用のAxeアクセシビリティリンター拡張機能、またはJetBrains用のプラグインを設定して、カスタムコンポーネントのアクセシビリティエラーを見つける方法を紹介します。
この記事は、 VS Code用Axeアクセシビリティリンター拡張機能 と JetBrains用プラグインのユーザー向けです。Axe DevTools Linter RESTエンドポイントのユーザーは、 RESTエンドポイントでカスタムコンポーネントをリントする を参照してください。
カスタムコンポーネントのリントの概要を読みたい方は、 カスタムコンポーネントのリントを参照してください。
この手順書を利用するには、以下がインストールされている必要があります：
Visual Studio Code用：
JetBrains IDE用：
アクセシビリティエラーの例
拡張機能を使用してソースコードをリントすると、アクセシビリティエラーがIDE内で赤い波線で表示されます。例えば、次のHTMLは img 要素に alt 属性がない利用例を示しています。これは、VS Codeで示されるアクセシビリティエラーです。
<img src="path/to/image.jpg"/>（これはリントのデモンストレーションのための簡単な例であり、実際の具体例ではありません。）
拡張機能はエラーのある行を強調表示し、マウスカーソルをエラーの上に置くとツールチップを提供します。この img 要素に alt 属性がないため、拡張機能からIDE内で（VS Codeが表示されます）アクセシビリティエラーが発生します：
カスタム画像コンポーネント
この例では、開発者は custom-imageと呼ばれるカスタムコンポーネントを作成しました。次のサンプルは custom-image カスタムコンポーネントの使用例です：
<custom-image path="images/image.jpg"></custom-image>この例では、 custom-image コンポーネントは img 要素を作成し、 path 属性（カスタムコントロールの実装によって src 属性にマッピングされる）を持ちます。拡張機能は custom-image と img の間にマッピングがないため、エラーを示しませんが、出力の img 要素には alt 属性が欠けています：
マッピング custom-image へ img
マッピングを提供する場合、 custom-image へ img、Axe DevTools Linterはカスタムコンポーネントを標準HTML要素としてマップし、アクセシビリティエラーを見つけることができます。マッピングを指定するには、 global-components 構成オプションを axe-linter.yml 構成ファイルで使用します:
global-components:
custom-image: img拡張機能は、今やアクセシビリティエラーを強調表示し、マウスカーソルをエラーの上に置くとツールチップを提供します:
上記と同じマッピングを以下のいずれかの構文を使用して示すこともできます:
global-components:
custom-image:
element: imgまたは、 element を省略して el:
global-components:
custom-image:
el: img要素のマッピングを使用すると、カスタムコンポーネントのすべての属性が生成された要素にコピーされ、その生成された要素がリンティングされます。
アクセシビリティの問題を修正する
属性を追加して alt のアクセシビリティ問題を修正することができます: custom-image エラーがなくなり、IDEに赤い波線が表示されなくなります（VS Codeで確認済み）:
<custom-image path="images/image.jpg" alt="alt text"></custom-image>カスタムコンポーネントが適切に構成され、VS Codeで適切な属性が使用されていることを示します。
場合 alternative-text カスタム画像コンポーネントが代替テキストを示すために異なる属性を使用している場合、その属性を構成で指定できます。たとえば、
コンポーネントが custom-image 属性を使用している場合、 alternative-text の代わりに以下のように: altこの場合、
<custom-image path="images/image.jpg" alternative-text="alt text"></custom-image>属性と alternative-text 属性との間にマッピングを指定できます alt として attributes 配列を axe-linter.yml ファイルで次のように:
global-components:
custom-image:
element: img
attributes:
- alternative-text: altこの global-components 構成は、以前の1つのカスタムコンポーネントと1つのHTML要素のマッピングとは少し異なります。要素だけの場合、キー（custom-image）から値（img）へのマッピングを使用します。 attributes 配列を含めることで、生成されたHTML要素を指定するために element プロパティ（または el）を使用する必要があります。
この変更によりエラーが修正され、IDEに赤い波線は表示されません（VS Codeで確認済み）。
配列を構成で指定したため、拡張機能が attributes から custom-image へマップするとき、 img 配列内の attributes に一致する属性のみ が生成されたHTML要素にコピーされます。
も省略して attributes を attrs:
global-components:
custom-image:
element: img
attrs:
- alternative-text: alt特別な属性値: <text> と aria-*
次のように custom-button コンポーネントを使用すると仮定します：
<custom-button aria-controls="expand-region" aria-expanded="false" aria-colindex="1" message="Show Region"></custom-button>（カスタムボタンは、ここに含まれていないJavaScriptとCSSを使用して、 divを表示または非表示にします。）
この使用法には2つの問題があります：
- この
custom-buttonコンポーネントを直接button要素にマッピングすると、ボタンに表示されるテキストコンテンツがありません。ただし、コンポーネント作者の意図としては、message属性がテキストコンテンツとして使用されるべきです：<button>属性のmessage値</button> - 生成された
button要素にはbuttonの暗黙的な役割があり、aria-colindex属性は誤りであり削除されるべきです。
通常、このHTMLにはエラーが発生しないのは、 custom-button と buttonの間にマッピングがないからです。しかし、 custom-button との間に単純なマッピングを作成すると、 button 次のようになります：
global-components:
custom-button: buttonエラーが2つ発生します（VS Codeが表示されています）：
特別な <text> 値
最初の問題（ button 要素へのテキストコンテンツが message 属性から来る問題）に対応するために、上記で識別された button-name （IDEのツールチップに表示されている）として、特別な <text> 値を使用することができます。この場合、 message 属性のテキストを生成された button 要素のテキストコンテンツにコピーする必要があります。
拡張機能で、 message 属性がHTML button 要素のテキストコンテンツとされるべきことを設定するには、 <text> 特別な axe-linter.yml 値を設定ファイルで使用してください：
global-components:
custom-button:
element: button
attributes:
- message: <text>あなたが message 属性を <text>として定義したため、拡張機能にその属性がHTML button 要素のテキストコンテンツと置き換えるものと見なすよう指示しています。属性の値と共に。 message 要素のテキストコンテンツと置き換えるものと見なすよう指示しています。属性の値と共に。
残念なことに、 attributes 配列を使用すると、生成された button 要素に渡された属性は message 属性のみでした。配列に含まれていない属性は渡されません。これは、拡張機能で不正な attributes がキャッチされなかったことを意味します。 aria-colindex がキャッチされなかったことを意味します。
使用方法 aria-*
特別な aria-* すべてのARIA属性を渡すための値は、以下のように表示されます：
global-components:
custom-button:
element: button
attributes:
- message: <text>
- aria-*
このエラーは、 button 要素に暗黙的な role="button" があり、 aria-colindex ボタンに使用すると無効です。 aria-*では、すべてのARIA属性が出力される要素にコピーされ、無効な aria-colindex 属性も含まれます。
<element>
複雑なコンポーネントでは、特定の場合にデフォルト要素とは異なるHTML要素を出力したいことがあります。例えば、通常はボタンとして動作し、他の状態ではプレースホルダー画像として機能するボタンコンポーネントがあるかもしれません。 <element> 値を使うことで、出力される要素を決定する属性をカスタムコンポーネントに指定できます。
global-components:
my-button:
element: button
attributes:
- use: <element>この場合、 use 属性が my-button コンポーネントに付与され、出力される要素を示します。 img 出力された alt 要素には
すべての属性を暗黙的に渡す
もしも要素マッピングのみ（マッピングが attributes 配列を使用していない）が使われていた場合、デフォルトで全ての属性が button 要素にコピーされます。この場合の設定は以前に示しました：
global-components:
custom-button: buttonIDEに表示されるエラーに加えて（ここではVS Codeが表示されています）：
上記の例は、カスタムコンポーネントのリンティングを開始する際の実用的な第一歩として、要素マッピングを開始し（すべての属性を標準HTML要素にコピーすることにより）、次に設定に追加すべき属性を確認することを示しています：
- カスタムコンポーネントの属性のいずれかが異なる属性にマッピングされるべきかどうか。
- 使用する必要があるかどうか、
<text>または。aria-*を
デフォルト属性
デフォルト属性を使用すると、一つの属性を他の属性にマッピングするのではなく、設定ファイルで属性の値を設定できます。例えば、以下のサンプル設定では、 custom-menu コンポーネントが li 要素にマッピングされ、 role の メニュー：
global-components:
custom-menu:
element: li
attributes:
- role:
name: null
default: menuそのため、 role 属性にはデフォルト値として メニューが設定ファイル内に設定されているため、ユーザーは role 属性を指定する必要がありません。つまり、カスタムコンポーネントの実装が出力要素にこれらの属性を生成し、その値を設定することで、ユーザーがコンポーネントを利用する際に設定する必要を無くしています。 custom-menu
場合によっては、 name 値は null に設定されており、これによりAxe DevTools Linterはユーザーが指定した role 属性を無視します。 custom-menu リンティングされたコード内の
で指定された値は、文字列でなければなりません。 default ことを確認してください。