アクセシビリティ・テスト

アプリケーションがウェブインターフェースを提供している場合、GitLab CI/CDを使用して、保留中のコード変更のアクセシビリティへの影響を判断することができます。

Pa11yは、Webサイトのアクセシビリティを測定するためのフリーでオープンソースのツールです。GitLabはPa11yをCI/CDジョブテンプレートにインテグレーションしています。a11y ジョブは定義されたウェブページのセットを分析し、アクセシビリティ違反、警告、および通知をaccessibilityという名前のファイルにレポートします。

GitLab 14.5の時点で、Pa11yはWCAG 2.1ルールを使用しています。

アクセシビリティマージリクエストウィジェット

GitLabはマージリクエストウィジェットエリアにアクセシビリティレポートを表示します：

Accessibility merge request widget

アクセシビリティテストの設定

GitLabアクセシビリティDockerイメージを使って、GitLab CI/CDでPa11yを実行できます。

a11y ジョブを定義します：

  1. GitLabのインストールからAccessibility.gitlab-ci.yml テンプレート をインクルードします。

  2. .gitlab-ci.yml ファイルに以下の設定を追加します。

    stages:
  - accessibility
   
variables:
  a11y_urls: "https://about.gitlab.com https://gitlab.com/users/sign_in"
   
include:
  - template: "Verify/Accessibility.gitlab-ci.yml"
  3. a11y_urls 変数をカスタマイズして、Pa11y でテストするウェブページの URL をリストします。

CI/CDパイプラインのa11y ジョブがこれらのファイルを生成します：

  • a11y_urls 変数にリストされたURLごとに1つのHTMLレポートが生成されます。
  • 収集したレポートデータを含むファイル1つ。GitLabバージョン12.11以降では、このファイルの名前はgl-accessibility.json 。GitLabバージョン12.10以前では、このファイルの名前はaccessibility.json 。

ブラウザでジョブのアーティファクトを見ることができます。

note
テンプレートが提供するジョブ定義はKubernetesをサポートしていません。

CI設定経由でPa11yに設定を渡すことはできません。設定を変更するには、CIファイルでテンプレートのコピーを編集してください。