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要素としてマッピングし、アクセシビリティエラーを見つけることができます。このマッピングは、axe-linter.yml設定ファイルのglobal-components構成オプションを使用して指定できます。
global-components:
custom-image: img拡張機能は、今やアクセシビリティエラーを強調表示し、マウスカーソルをエラーの上に置くとツールチップを提供します:
上記と同じマッピングを以下のいずれかの構文を使用して示すこともできます:
global-components:
custom-image:
element: imgまたは、elementをelとして省略することもできます:
global-components:
custom-image:
el: img要素のマッピングを使用すると、カスタムコンポーネントのすべての属性が生成された要素にコピーされ、その生成された要素がリンティングされます。
アクセシビリティの問題を修正する
アクセシビリティの問題を修正するには、custom-imageにalt属性を追加できます。
<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属性の間にマッピングを指定することができ、axe-linter.ymlファイル内のattributes配列でそれを示します。
global-components:
custom-image:
element: img
attributes:
- alternative-text: altこのglobal-components構成は、以前の1つのカスタムコンポーネントを1つのHTML要素にマッピングするものとは少し異なります。要素のみの場合は、キー（custom-image）から値（img）へのマッピングを使用します。attributes配列を含めることにより、element（またはel）プロパティを使用して出力されるHTML要素を指定する必要があります。
この変更によりエラーが修正され、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属性から来ること）は、あなたのIDEのツールチップでbutton-nameとして識別された特別な<text>値を使用して解決できます。この場合、message属性のテキストは、出力されるbutton要素のテキストコンテンツにコピーされるべきです。
message属性がHTMLbutton要素のテキストコンテンツとして考慮されるべきことを拡張機能に設定するには、axe-linter.yml設定ファイルで特別な<text>値を使用できます。
global-components:
custom-button:
element: button
attributes:
- message: <text>message属性を<text>として定義したため、その属性がHTMLbutton要素のテキストコンテンツを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>この場合、my-buttonコンポーネントのuse属性が出力する要素を示します。出力されたimg要素にalt属性が含まれていないため、エラーが発生します。
すべての属性を暗黙的に渡す
attributes配列を使用しない要素マッピングのみを使用した場合、すべての属性がデフォルトでbutton要素にコピーされます。このケースに対する設定は以前に示されています。
global-components:
custom-button: buttonIDEに表示されるエラーに加えて（ここではVS Codeが表示されています）：
上記の例は、カスタムコンポーネントのリンティングを開始する際の実用的な第一歩として、要素マッピングを開始し（すべての属性を標準HTML要素にコピーすることにより）、次に設定に追加すべき属性を確認することを示しています：
- カスタムコンポーネントの属性のいずれかが異なる属性にマッピングされるべきかどうか。
<text>を使用する必要があるか、またはaria-*を使用する必要があるか。
デフォルト属性
デフォルト属性を使用すると、1つの属性を別の属性にマッピングする代わりに、構成ファイルで属性の値を設定できます。たとえば、次のサンプル構成は、custom-menuコンポーネントをli要素にメニューのroleでマッピングする方法を示しています。
global-components:
custom-menu:
element: li
attributes:
- role:
name: null
default: menu構成ファイルでrole属性のデフォルト値をメニューに設定したため、ユーザーはcustom-menuコンポーネントをコードで使用するときにrole属性を指定する必要はありません。これは、カスタムコンポーネントの実装が出力要素にこれらの属性を作成し、それらの値を設定することを意味し、ユーザーがコンポーネントを使用するときにそれらを設定する必要がないことを意味します。
オプションで、name値が構成でnullに設定されているため、Axe DevTools Linterは、リンティングされたコードのcustom-menuでユーザーが指定したrole属性を無視します。
defaultで指定された値は文字列である必要があります。