Skip to content

Testing accessibility in GitLab CI/CD with a real screen reader

By Mohammed Ouinas, published on .

I am blind, and I test the accessibility of websites with a screen reader every day. Defects are too often found after release, when they cost the most to fix. So, with AANC, I built a CI/CD component for GitLab: on every pipeline, the NVDA screen reader goes through your page and tells you what it actually announced.

This is shift-left applied to accessibility: catching defects during development, not once the site is live.

Demonstration on a real GitLab pipeline and a demo page with deliberate defects. Length: 2 minutes. In French, with French subtitles in the image. Voice generated by artificial intelligence.
Transcript of the video (in French)

Bonjour. Je suis la voix de synthèse d'AANC, un cabinet d'accessibilité numérique fondé par Mohammed Ouinas, consultant non-voyant. Trop souvent, les défauts d'accessibilité sont découverts après la mise en production, quand ils coûtent le plus cher à corriger. AANC a donc créé un composant pour GitLab : à chaque pipeline, un vrai lecteur d'écran parcourt votre page.

Vous le trouvez dans le catalogue CI/CD de GitLab, sous le nom aanc-accessibilite, avec le logo d'AANC.

À l'écran, voici le fichier point gitlab-ci point yml d'un projet. Il suffit d'ajouter quelques lignes : le nom du composant, et l'adresse de la page à tester. La clé fournie par AANC est enregistrée dans une variable masquée du projet.

La page testée est une boutique de démonstration, avec des défauts volontaires. Voici le vrai pipeline. Le job envoie la demande à AANC. Sur une machine Windows, le lecteur d'écran NVDA parcourt la page : ses titres, ses régions, ses champs et ses liens. Le moteur axe et nos propres mesures contrôlent aussi le contraste, le focus au clavier, le zoom et la largeur de 320 pixels. Le passage dure quelques minutes. Nous passons directement à la fin.

Le job s'est terminé en échec : il a trouvé des défauts. L'accessibilité devient une vraie barrière de qualité, au même titre que vos tests. Si vous préférez, une option garde seulement le rapport, sans bloquer le pipeline.

Voici le rapport, dans le journal du job. Il est écrit pour se lire aussi au lecteur d'écran. Il commence par les corrections à prévoir, les plus rapides d'abord. Pour chaque critère, il dit ce qui était attendu, ce que NVDA a réellement annoncé, la correction proposée, et l'effort estimé. Quand l'outil ne peut pas trancher, il l'écrit : à vérifier à la main. Le rapport est en français et relié au RGAA, ou en anglais et relié au WCAG.

Ce test ne remplace pas un audit. Il contrôle, en tout ou partie, jusqu'à 31 critères du RGAA sur 106, sur une seule page, et il ne teste pas les parcours complets. Son rôle est de repérer plus tôt des défauts concrets. AANC cherche quelques équipes pilotes sur GitLab, pour un essai gratuit d'un mois. Écrivez à contact, arobase, aanc tiret accessibilite point f r. Cette voix est générée par intelligence artificielle.

Why a screen reader, and not just a scanner

A scanner reads the page's code and applies rules. It is useful, but it does not tell you what a blind person hears. The AANC component runs NVDA, the screen reader, on the page. A button with no label, for example, is simply announced as "button": the user has no idea what it does.

The report quotes the exact phrases spoken by NVDA. Developers get concrete evidence of what happens, not just a rule to interpret.

What the test checks

Up to 22 WCAG 2.2 Level A and AA success criteria, in whole or in part, on the page you choose. With the option referentiel: wcag, the report is in English.

Each check ends with a clear result: no problem found, to fix with the fix and estimated effort, to check by hand when the tool cannot decide, or not applicable when the page has nothing of the kind.

A few lines in your pipeline

Once your AANC key is saved in a masked variable called AANC_CLE, add this to your .gitlab-ci.yml file:

include:
  - component: gitlab.com/oujdi93200/aanc-accessibilite/nvda-site@1.3.0
    inputs:
      site_url: https://staging.my-site.com
      referentiel: wcag

The job waits for NVDA to finish, about ten minutes, then shows the report in its log and keeps it as an artifact. By default, it fails the pipeline if a checked criterion is not compliant: accessibility becomes a real quality gate, just like your tests. You can turn this off and keep only the report.

All options are described in the component's guide on GitLab (in French).

An optional AI opinion on images

A tool can tell that an image has alternative text, but not whether that text describes the image well. As an option, an AI gives its opinion on the relevance of these texts (criterion 1.3), for up to ten images.

This opinion must be checked by a human: it counts neither in the criteria nor in the job's result.

Your data

What this test does not do

It does not replace an audit. It covers part of the 55 WCAG 2.2 Level A and AA success criteria, and the result is not a conformance claim. It does not test a full journey either, such as an order or an online procedure, and the report states what remains to be checked by hand.

The page must also be publicly reachable over HTTPS: internal addresses are refused.

Its value lies elsewhere: catching concrete defects earlier, before they reach production.

We are looking for pilot teams

I am looking for a few teams working on GitLab to try the component free of charge for one month on their projects, and tell me what is missing. If this speaks to you, write to me at contact@aanc-accessibilite.fr or use the contact form.

Mohammed Ouinas is a digital accessibility consultant and the founder of AANC. Blind himself, he tests websites with a screen reader.