リンティングとは?
リンティングは、ソースコードを実行する前に問題を見つけるために自動的に解析するプロセスです。リンターは、コードを読み取り、構文エラーやタイプミスからスタイルの不一致、潜在的なバグに至るまでの問題を指摘するツールです。
この用語は、元々Cプログラムの疑わしい構造をチェックするためのUnixツールであるlintに由来します。今日では、リンターはほぼすべてのプログラミング言語に存在し、コード品質の最前線で防御の役割を果たしています。
リンターは、コードのスペルチェッカーのようなもので、タイプミスだけでなく、論理的な間違いもキャッチし、スタイルルールを施行し、バグを引き起こしやすいパターンについて警告を発します。
アクセシビリティリンターとは?
アクセシビリティリンターは、悪いアクセシビリティの実践の可能性をチェックし、ウェブサイトやアプリケーションがビルドされ、動作する前ではなく、開発中にフィードバックを提供します。
Axe DevTools Linterの機能
Axe DevTools Linterは、ソースファイルの静的解析を行います。コードを読み取り、Dequeのルールに照らしてアクセシビリティの問題を引き起こす可能性のあるパターンを特定します。例えば、以下を検出できます。
- 代替テキストがない画像
- ラベルのないフォーム入力
- 不正または不足しているARIA属性
- 見出し構造の問題
Axe DevTools Linterは、実行中のアプリケーションではなくソースコードを解析するため、コードが統合され、デプロイされ、またはコンパイルされる前にこれらの問題を早期に検出できます。
Axe DevTools Linterにできないこと
Axe DevTools Linterは静的解析ツールであるため、以下のことはできません:
- 動的に読み込まれるコンテンツやJavaScript駆動のUI変更など、アプリケーションの実行時の動作をテストすること。
- すべてのアクセシビリティ問題を検出すること。静的解析では検出可能な欠陥の一部だけをカバーし、いくつかの問題はブラウザーベースのテストや手動のレビューが必要になります。
- 手動のアクセシビリティテストやブラウザーベースのツールの代替になること。
対応技術
Axe DevTools Linterは以下のファイルタイプをチェックできます:
| テクノロジー | ファイル拡張子 |
|---|---|
| React | .js、.jsx、.tsx |
| Vue | .vue |
| Angular | .component.html |
| HTML | .html、.htm、.xhtml |
| LiquidJS | .liquid |
| HTL(Adobe Experience Manager) | .htl |
| Markdown | .md、.markdown |
| React Native | React Native向けAxe DevTools Linterを参照 |
Axe DevTools Linterの使用方法
Axe DevTools Linterは、ワークフローに応じていくつかの方法で使用できます:
IDE拡張機能は、コードを書いているときにリアルタイムのフィードバックを提供します。VS Code拡張機能(CursorやWindsurfなどのVS Code互換AI IDEでも利用可能です)とJetBrainsプラグイン(WebStormおよびIntelliJ IDEA Ultimate)が、あなたがタイプする際にエディターで直接アクセシビリティの問題を示します。
コネクタは、バッチやスクリプト、CI/CDパイプラインの一部としてファイルをリンティングするためのコマンドラインツールです。Axe DevTools Linter Connectorの使用を参照。
GitHubアクションは、プルリクエストで変更されたファイルをチェックし、アクセシビリティの問題を報告します。Axe DevTools Linter GitHubアクションを参照。
その他のCI/CD統合には、Jenkins、SonarQube、Gitのプリコミットフックが含まれています。
分析の実行場所
ローカルリント: VS Code拡張機能、JetBrainsプラグイン、およびConnector(--localオプション付き)はすべて、あなたのマシン上でアクセシビリティ解析を実行します。ファイルの内容は決してコンピュータを離れません。
サーバーベースのリント: GitHub Actionが採用している手法で、ConnectorはファイルをAxe DevTools Linterサーバーに送って解析することもできます。サーバーには2つのオプションがあります。
- DequeホスティングSaaS: Dequeのクラウドサーバー。APIキーが必要で、サーバーの設定は必要ありません。
- オンプレミス: 自分のインフラ内で実行するサーバー。インストールとセキュリティを参照。
Connectorでのローカルとサーバーベースのリンティングの選択についてのガイダンスは、ローカルリントを参照してください。
ドキュメントの概要
適切なAxe DevTools Linterのセットアップを選ぶは、どの展開モデル、統合、および設定があなたのチームのワークフローに適しているかを決める手助けをします。
Axe DevTools Linter SaaS APIキーを取得するはDequeのクラウドベースのリンティングサービスにアクセスするためのキーの取得方法を示しています。
アクセシビリティルールは、Axe DevTools Linterが確認するすべてのルールをリストアップし、Deque Universityに関する詳細情報へのリンクを提供します。
Axe DevTools Linterの設定は、VS Code拡張機能、JetBrainsプラグイン、Axe DevTools Linter Connector、およびREST API/lint-sourceエンドポイントで利用可能な設定オプションをカバーしています。
インストールとセキュリティには、オンプレミスサーバーをインストールし、NGINXをリバースプロキシとして使用して保護するための記事が含まれています。
Axe DevTools Linterの使用は、JetBrainsプラグイン、VS Code拡張機能、Connector CLI、GitHub Action、pre-commit フック、Jenkins、SonarQubeというさまざまなインテグレーションをカバーしています。
カスタムコンポーネントのLintingは、カスタムコンポーネントに対するAxe DevTools Linterのサポートと、VS Code および JetBrains ユーザーおよびREST エンドポイントユーザーの手順ガイド、加えて事前構成済みコンポーネントライブラリに関する記事を論じています。
REST API を使った開発は、そのRESTインターフェースを使用してAxe DevTools Linterにプログラム的にアクセスする方法を説明します。
クレジットは、Axe DevTools Linterで使用されているサードパーティソフトウェアの帰属およびライセンス情報を提供します。
Note: It is never necessary to use Deque's software or services in a way that collects, stores, or shares personal data. Do not use the software or services in a manner that collects, stores, or shares personal data.
