Axe DevTools LinterとSonarQubeの連携

This page is not available in the language you requested. You have been redirected to the English version of the page.

Link to this page copied to clipboard

Axe DevTools LinterをSonarQubeと統合して、コードのアクセシビリティ問題を監視する方法

Not for use with personal data

Axe DevTools LinterをSonarQubeと統合することで、コードのアクセシビリティ問題を監視することができます。ここに記載されたアイデアを使って、CI/CDシステムをSonarQubeと統合することも可能です。SonarQubeのドキュメントでは、GitLab CI/CD、GitHub Actions、Azure Pipelines、またはBitbucket Pipelinesの使用に関する情報が記載された概要を参照してください。

SonarQube統合の概要

SonarQubeとの統合のための重要な要素は、コマンドラインツールAxe DevTools Linter Connectorです。このツールはファイルをスキャンし、その結果をSonarScanner CLIツール経由でSonarQubeにアップロードするレポートを作成します。詳細な手順は以下の通りです：

ローカルディレクトリ内のファイルをスキャンする。
Axe DevTools Linter Serverにファイルを送信してリンティングやローカルでファイルをリントするを行います。
リントの結果を、SonarQubeに互換性のあるJSONレポートとして収集する。
SonarScanner CLIをこのレポートに対して実行し、問題を外部問題としてSonarQubeに送信します。この場合、SonarScannerツールは実際にはファイルをスキャンしません。単にAxe DevTools Linterが発見した問題を外部問題として報告するだけです。

最初の3つのステップはAxe DevTools Connectorによって行われ、最後のステップはSonarScanner CLIによって行われます。

カスタムCI/CD統合では、次のアクションを行う必要があります：

適切なコマンドライン引数を使用してAxe DevTools Linter Connectorを起動し、プロジェクトのファイルをスキャンしてSonarQubeとの互換性のあるJSONレポートを生成します。
SonarScanner CLIを起動して、リントの結果をSonarQubeに送信します。

要件

Axe DevTools Linter Connector：設定と使用方法についてはAxe DevTools Linter Connectorの使用を参照してください。
SonarQube：この統合はSonarQube Community Build 26.4でテストされています。SonarQubeはバージョン10.3でその汎用問題インポート形式を変更し、将来のバージョンでは更新された形式が必要になるかもしれません。インポートの警告や問題に遭遇した場合は、Axe DevTools Linter ConnectorとSonarQubeのバージョンが互換性があることを確認してください。
SonarScanner CLI：このツールのダウンロードに関する詳細はSonarScanner CLIを参照してください。

SonarQubeの設定

SonarQubeを設定するには、プロファイルを作成し、重複するルールを削除して無効化します（SonarQubeで新しく作成されたプロファイルの一部のルールは、Axe DevTools Linterでチェックされるルールと重複し、重複したエラーを引き起こします）。SonarQubeの管理インターフェースで重複するルールを削除することができます。以下のセクションでは、その方法について説明します。

新しい品質プロファイルを作成

ルールを変更するには、SonarQube管理ウェブサイトのトップにある品質プロファイルをクリックします。それからプロファイルをフィルタリング：ドロップダウンをクリックし、HTMLを選択します。これで、SonarQubeの組み込みHTMLプロファイルが表示されます。プロファイルの右側にあるギアドロップダウンをクリックしてそのプロファイルを複製し、コピーを選びます。SonarQubeは新しいプロファイルの名前を付けるように促します。新しいプロファイルの名前をAxe Linterとし、コピーボタンをクリックします。

これで、Axe Linterと呼ばれる新しいHTML品質プロファイルができます。Axe Linterプロファイルのギアドロップダウンを選び、このプロファイルがすべてのHTMLファイルのチェックに使われるようにデフォルトに設定を選択します。

冗長なルールの削除

次のステップは、作成したAxe Linter品質プロファイルから冗長なルールを削除することです。HTMLルールのリストには2つのプロファイルがあります。Axe LinterプロファイルとSonar wayプロファイルです。プロファイル設定のページに移動するために、Axe Linterプロファイルをクリックします。画面の左側には、プロファイルにある異なる種類のルールのリストが表示されているはずです。合計の右上の数字とアクティブ列でアクティブルールを編集するためにクリックします。

画面の右側にはAxe Linter HTMLプロファイルで有効になっているルールのリストがあります。以下の冗長ルールを無効にしてください：

<fieldset>タグには<legend>が含まれているべきです
リンクは直接画像をターゲットにすべきではありません
画像、エリア、およびボタンには画像タグがあり、「alt」属性が必要です
<th>タグにはidまたはscope属性が必要です
表のセルはその見出しを参照する必要があります
<object>タグは代替コンテンツを提供するべきです
<strong>および<em>タグを使用するべきです
<table>タグには説明があるべきです
動画には字幕が必要です
サーバー側のイメージマップ（ismap属性）は使用しないでください
<html>要素には言語属性があるべきです
<frames>にはtitle属性があるべきです
レイアウト目的でHTML<table>を使用してはいけません
レイアウトに使用されるテーブルにはセマンティックマークアップを含めるべきではありません
似た要素を区別するためにaria-labelまたはaria-labelledby属性を使用するべきです
テーブルにはヘッダーが必要です

これらのルールはこのDequeサポート記事のステップ5に記載されています。

important

冗長なルールを含むサポート記事にアクセスするにはDequeアカウントが必要です。ヘルプセンターとアカウント取得に関する詳細はこの記事をご覧ください。

SonarQubeの設定ファイルを作成する

SonarQubeのSonarScanner CLI用の設定ファイルを作成する必要があります。以下にsonar-project.propertiesという名前の設定ファイルの例を示します。

sonar.projectKey=Test-Deque
sonar.externalIssuesReportPaths=axe-linter-report.json

**sonar.projectKey**はSonarScannerが結果を報告するSonarQubeのプロジェクト名です。

SonarQubeのセキュリティトークンを生成する

SonarQubeスキャナが結果を報告するためにSonarQubeに接続できる必要があります。これを行うには、SonarQubeの管理ウェブインターフェイスでログイントークンを作成します。

ログイントークンを作成するには、SonarQube管理ウェブインターフェースの画面中央上部にある**管理**をクリックします。その後、画面上部近くの**セキュリティ**ドロップダウンをクリックし、**ユーザー**を選択します。SonarQubeに結果を報告するためのユーザーを選び、そのユーザーのためにセキュリティトークンを作成するには、**トークン**の下にあるアイコンをクリックします。ポップアップウィンドウの**トークンの生成**でトークンの名前を入力し、**生成**をクリックします。このトークンの値（32ビットの16進文字列）を保存してください。**トークン**ウィンドウを閉じた後、再表示する方法はありません。（ただし、いつでも新しいトークンを生成することはできます。）

SonarScanner CLIはこのトークンを使ってサーバーに結果を報告します。それはSONAR_TOKEN環境変数に設定する必要があります。

統合を実行する

SonarQubeのルールを設定し、設定ファイルを作成し、セキュリティトークンを生成したら、統合を実行できます。プロセスは二段階です：

Axe DevTools Linter Connectorを実行して、プロジェクトファイルをスキャンし、SonarQube互換のレポートを生成します。
SonarScanner CLIを起動して、レポートをSonarQubeにアップロードします。

リンターレポートを生成する

Axe DevTools Linter Connectorをsonar-project.propertiesファイルと同じディレクトリから実行します：

axe-linter-connector -s . -d .

これにより現在のディレクトリに**axe-linter-report.json**が生成されます。サーバー、認証、およびその他のコマンドラインオプションについてはAxe DevTools Linter Connectorの使用を参照してください。

important

コネクタは、SonarScannerのプロジェクトベースディレクトリから実行される必要があり、レポートのファイルパスがSonarQubeが期待するファイルと一致するようにします。

レポートをSonarQubeにアップロードする

SONAR_TOKEN環境変数に生成したセキュリティトークンを設定し、次にSonarScanner CLIを実行します：

export SONAR_TOKEN=<your-sonarqube-token>
sonar-scanner -Dsonar.host.url=<sonarqube-server-url>

<sonarqube-server-url>をあなたのSonarQubeサーバーのURLに置き換えてください（例：http://localhost:9000）。

SonarScanner CLIはsonar-project.propertiesファイルを読み込み、sonar.externalIssuesReportPathsに指定されたレポートを見つけて、外部の問題としてSonarQubeにアップロードします。

結果の表示

Axe DevTools Linterによって発見された問題は、プロジェクトのSonarQubeウェブインターフェースでIssuesをクリックすると表示されます。Axe DevTools Linterの問題は、MarkdownファイルではAXE-LINTER-MD、HTMLファイルではAXE-LINTER-HTMLによって識別されます。

レポート

Axe DevTools Linter ConnectorはSonarQube Generic Issue Import Formatに従ったJSONレポートを生成します。

Axe DevTools Linter Connectorのコマンドラインオプションを使用して、レポートのいくつかのオプションを変更することができます。詳細についてはOptional Command-Line Optionsを参照してください。