Did you know that your current app or website will never be famous worldwide due to a stupid mistake? Did you know that even Google did this terrible mistake own their Homepage visited daily by billions of users?

From August 25th to September 5th 2021 the Paralympic Games are running in Tokyo On this occasion the global mouvement #WeThe15 started a new campaign to spread awareness about disable people around the world.

Roughly 15% of the worldwide population have disabilities. From visual impairment to amputee there is multiple reasons that make your app or website is impossible to use by 1.2 billion persons (yep that’s a lot).

It’s time to take action and make your project accessible to anyone! Maybe because you have diversity and the open source mouvement at heart. Or if you have to comply to one of the Government certifications and you don’t want to be fined!

There is multiple frameworks that will help you in order to achieve accessibility for all. The most famous are WCAG and RGAA

Web developers tools embedded in Mozilla Firefox or in Chromium can run an audit and create a report on a webpage. That’s an easy and quick way to start.

But we are Cloud Native nerds and we are passionate about automation and CI.

Let me introduce you the pa11y tools (read pally). pa11y is a javascript tool that scan your project and generate an accessibility report. It come with a bundle version dedicated for CI pipeline: pa11y-ci (easiest name is the wolrd)

To install it just run:

sudo npm install -g pa11y-ci --unsafe-perm

Pa11y-ci have the ability to scan more that one page at once. You can also simulate actions like login to an admin page before generating the report. This actions are stored in a JSON format file.

Here an exemple I use to scan 2 pages and disable TLS verification because Self-signed certificate are easier in CI:

{"defaults":{
    "chromeLaunchConfig": {
      "ignoreHTTPSErrors": "true"
    }
  },
  "urls": [
    {
      "url": "https://webtest.mylabserver.com/",
      "userAgent": "Mozilla"
    },
    {
      "url": "https://webtest.mylabserver.com/dashboard/",
      "userAgent": "Mozilla",
      "actions": [
        "set field #login-form input to admin",
        "set field #pass-form input to password",
        "click element .btn.role-primary",
        "wait for path to be /dashboard/"
      ]
    }
  ]}

Now run a scan by simply run:

pa11y-ci -c myactions.json

You can add this line in your CI pipeline and you will be informed if any change in your code make someone out of your app!

More info on how I - a colorblind - see Google logo