Use packaged script from GitLab accessibility image

changelogs/unreleased/a11y-gitlab-script.yml

+---
+title: Generate JSON-formatted a11y CI artifacts
+merge_request: 26687
+author:
+type: added

doc/user/project/merge_requests/accessibility_testing.md

@@ -21,32 +21,34 @@ analyzed to a file called `accessibility`.
 ## Configure Accessibility Testing
 
 This example shows how to run [pa11y](https://pa11y.org/)
-on your code with GitLab CI/CD using a node Docker image.
+on your code with GitLab CI/CD using the [GitLab Accessibility Docker image](https://gitlab.com/gitlab-org/ci-cd/accessibility).
 
-For GitLab 12.8 and later, to define the `a11y` job, you must
+For GitLab 12.9 and later, to define the `a11y` job, you must
 [include](../../../ci/yaml/README.md#includetemplate) the
 [`Accessibility.gitlab-ci.yml` template](https://gitlab.com/gitlab-org/gitlab/blob/master/lib/gitlab/ci/templates/Verify/Accessibility.gitlab-ci.yml)
 included with your GitLab installation, as shown below.
-For GitLab versions earlier than 12.8, you can copy and use the job as
-defined in that template.
 
 Add the following to your `.gitlab-ci.yml` file:
 
 ```yaml
 variables:
-  a11y_urls: "https://about.gitlab.com"
+  a11y_urls: "https://about.gitlab.com https://gitlab.com/users/sign_in"
 
 include:
-  - remote: "https://gitlab.com/gitlab-org/gitlab/-/raw/master/lib/gitlab/ci/templates/Verify/Accessibility.gitlab-ci.yml"
+  - template: "Verify/Accessibility.gitlab-ci.yml"
 ```
 
-The example above will create an `a11y` job in your CI/CD pipeline and will run
-Pa11y against the webpage you defined in `a11y_urls` to build a report.
+creates an `a11y` job in your CI/CD pipeline, runs
+Pa11y against the webpages defined in `a11y_urls`, and builds an HTML report for each.
 
-NOTE: **Note:**
-Only one URL may be currently passed into `a11y_urls`.
+The report for each URL is saved as an artifact that can be [viewed directly in your browser](../../../ci/pipelines/job_artifacts.md#browsing-artifacts).
+
+A single `accessibility.json` artifact is created and saved along with the individual HTML reports.
+It includes report data for all URLs scanned.
 
-The full HTML Pa11y report will be saved as an artifact that can be [viewed directly in your browser](../../../ci/pipelines/job_artifacts.md#browsing-artifacts).
+NOTE: **Note:**
+For GitLab versions earlier than 12.9, you can use `include:remote` and use a
+link to the [current template in `master`](https://gitlab.com/gitlab-org/gitlab/-/raw/master/lib/gitlab/ci/templates/Verify/Accessibility.gitlab-ci.yml)
 
 NOTE: **Note:**
 The job definition provided by the template does not support Kubernetes yet.

lib/gitlab/ci/templates/Verify/Accessibility.gitlab-ci.yml

@@ -8,20 +8,12 @@ stages:
 
 a11y:
   stage: accessibility
-  image: node
-  script:
-    - wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - && \
-    - echo "deb http://dl.google.com/linux/chrome/deb/ stable main" > /etc/apt/sources.list.d/google.list && \
-    - apt-get update && \
-    - apt-get install -y google-chrome-stable && \
-    - rm -rf /var/lib/apt/lists/*
-    - npm install pa11y@5.3.0 pa11y-reporter-html@1.0.0
-    - 'echo { \"chromeLaunchConfig\": { \"args\": [\"--no-sandbox\"] }, \"includeWarnings\": true, \"reporter\": \"html\" } > pa11y.json'
-    - './node_modules/.bin/pa11y $a11y_urls > accessibility.html'
+  image: registry.gitlab.com/gitlab-org/ci-cd/accessibility:5.3.0-gitlab.2
+  script: /gitlab-accessibility.sh $a11y_urls
   allow_failure: true
   artifacts:
     when: always
-    expose_as: 'accessibility'
-    paths: ['accessibility.html']
+    expose_as: 'Accessibility Reports'
+    paths: ['reports/']
   rules:
     - if: $a11y_urls