VS Code 用 Axe Linter エクステンションの使用

VS Code 用の Axe DevTools Linter エクステンションを使用すると、VS Code IDE 内からアクセシビリティの問題をコードに対してチェックできます。React (JSX)、React Native、Angular、Vue、HTML、および Markdown に共通のアクセシビリティの欠陥をチェックできます。

エクステンションの取得

通常、エクステンションは VS Code エクステンションマーケットプレイスからダウンロードします。 インストール ボタンをクリックすると、エクステンションがダウンロードされ、VS Code を開いてエクステンションをインストールするための許可を求められます。

VSCodium または他のオープンソースの VS Code 互換エディタを使用している場合は、 Open VSX Registryからもエクステンションをインストールできます。

他のダウンロードとインストール方法については、 制限された環境におけるインストール をご覧ください。

使用の概要

このエクステンションは、VS Code において赤い波線でアクセシビリティエラーを強調表示し、エラーを示すツールチップを提供します。さらに、 問題 パネル（有効になっている場合）には、以下に示すようにエラーの一覧が表示されます：

ツールチップと情報には、 問題 パネルに、指定されたアクセシビリティエラーについての詳細情報を提供する Deque University へのリンクが含まれています。例に示されているように、コード例には lang 属性が欠落しており、 html 要素について Deque University で説明されています： html-has-lang。

設定

エクステンションを設定する必要はありませんが、設定ファイルを使用して動作を変更できます。詳細については、次を参照してください：

• Axe DevTools Linter の設定 で Axe DevTools Linter の設定オプションに関するリファレンスを確認してください
• VS Code または JetBrains IDEs 用 Axe アクセシビリティリントによるカスタムコンポーネントのリント で、カスタムコンポーネントをリントするためのエクステンションの設定方法を確認してください

アクセシビリティルールのサポート

プラグインがアクセシビリティエラーを特定するために使用するルールに関する詳細については、次を参照してください： アクセシビリティルール。

制限された環境におけるインストール

ほとんどの場合、Axe アクセシビリティリンターは VS Code マーケットプレイスから直接インストールできます。しかし、いくつかの組織では、インストールプロセスに影響を与えるセキュリティ制限があります：

1. VS Code マーケットプレイスからダウンロードできません。
2. エクステンションは、初めて起動する際、必要なバイナリコンポーネントをダウンロードできず、このコンポーネントはファイルのリントを行うものであり、オペレーティングシステムごとに異なります。

組織にこれらの制限がある場合は、Deque の Agora ソフトウェアリポジトリへのアクセスには Axe DevTools Linter のライセンスが必要です。次に、 .vsix パッケージをダウンロードできます。

Agoraのインストールパッケージについて

DequeはAgoraソフトウェアリポジトリで次のパッケージオプションを提供しています：

拡張機能のすべてのバージョンを含むディレクトリビューアが表示されます。例えば：

通常、最新バージョンを選択し、サブディレクトリを移動して、 .vsix ファイルを見つけます。

インストール手順

1. Deque Agoraリポジトリからお好みの .vsix パッケージをダウンロードします。
2. VS Codeで、 拡張機能 パネルを開きます。
3. オーバーフローメニュー（...）をクリックします。
4. メニューから VSIXファイルからインストール...を選択します。
5. ダウンロードした .vsix ファイルを選択します。

トラブルシューティング

VS Code拡張機能は診断情報を Axe Linter 出力チャネルに記録します。このログは拡張機能の起動活動、プラットフォームの詳細、拡張機能のバージョン、バイナリコンポーネントのダウンロード状況を含み、拡張機能が正しく起動または初期化されない際の問題を診断するのに非常に役立ちます。

ログを見るには：

1. 出力 パネル（表示 > 出力）を開きます。
2. チャネルのドロップダウンメニューの右上隅から Axe Linter を選択します。

拡張機能の問題について Dequeサポート に連絡する場合、このログの内容を含めることで、チームが問題を診断するのに役立ちます。

次のステップ

このドキュメントサイトには、Axe DevTools Linterのさまざまなソリューションの使用情報が含まれています。詳細については、 Axe DevTools Linterについてを参照してください。