AngularInDepth is moving away from Medium. More recent articles are hosted on the new platform inDepth.dev. Thanks for being part of indepth movement!

Accessibility is an essential topic for every modern web application.

Accessibility means that everyone can use your web application. As devs, it’s easy to assume that all users can see or interact with a page as we do. But there is a range of people that do not belong to the “typical” user. People may have visual, physical, auditory, or cognitive problems.

Accessibility is not about including groups, it’s about not excluding groups.

Even though accessibility is crucial, it’s often overlooked. I was once in a project where we built a vast webshop and completely forgot about accessibility. With that, we excluded a range of persons from our business. Also, our shop was nominated for an award which we didn’t get because our shop wasn’t accessible at all. 😔

You can imagine what happened after that. Taskforce! Trust me, adding aria attributes and listen to JAWS screenreader for days is not fun!

Take accessibility seriously!

You should treat accessibility seriously since it is an essential aspect. Again, it’s about preventing to exclude people from accessing your business.

In my opinion, the best way to handle accessibility is to integrate it as early as possible. Accessibility tests should be part of your workflow. I see them somewhat similar to unit or integration tests. They should be automated and integrated into a pipeline. In case of failure, you should not be able to merge.

What’s needed to make a web app accessible?

Making a page accessible fully accessible requires a lot of knowledge. There are tons of useful articles that answer this question. In my opinion, the following points are the most important ones:

Your page can be used with the keyboard — form controls can be navigated and activated

HTML code is written a semantic as possible

Labels are correctly wired with input fields using the for attribute

attribute ARIA (Accessible Rich Internet Applications) attributes are set and can be read by screen readers

Colors combinations follow the contrast accessibility guidelines.

Of course, it’s hard to remember all of those things. Therefore we need to automate it.

How to automate accessibility tests?

The beauty of the web and especially Angular is its broad ecosystem. There’s almost always a tool. Also for accessibility. And it’s called Pa11yCI .

It’s README tells us that it’s precisely what we are looking for:

Runs accessibility tests against multiple URLs and reports on any issues. This is best used during automated testing of your application and can act as a gatekeeper to stop accessability issues from making it to live.

To start using this tool, we first install it as a dev dependency.

npm i -D pa11y-ci

Once installed, we can go ahead and configure it. By default pa11y-ci looks for a .pa11y-ci file written in JSON or JavaScript. Let’s go ahead and create such a file on the root level of our project.

There are various ways to configure pay11-ci . You can find more information on the configuration on the official README or under this link. For the scope of this blog post, we go with the most straightforward setup.

{

"defaults": {

"timeout": 5000

},

"urls": [

"http://localhost:4200/foo",

"http://localhost:4200/bar",

"http://localhost:4200/baz"

]

}

The defaults key allows us to set some defaults which will be used for each URL. The urls key contains all the URLs that will be checked for accessibility.

As you can see, we are working with URLs; this already indicates that we test against a running instance of our application. Next, let’s add one more script to our package.json which executes the accessibility tests.

"test:accessability": "pa11y-ci",

At this point, we are ready for our first accessibility test. Let’s spin up two terminal windows and run ng server in the first one. After the dev server is up and running, we run npm run test:accessability in the second terminal window.

This now runs accessibility tests against our application and spits out a report that may look like this.