Accessibility with Codelyzer

Angular: The Full Gamut Edition

Charlie Greenman
June 21, 2020
3 min read

Introduction to Codelyzer

Codelyzer, if not familiar with already, is a static code analyzer built on top of Tslint. In particular, it’s a layer over Tslint with pre-made rules. Some of which include:

  1. Component selectors are kebab-case
  2. Directive selectors are camelCased
  3. no-host-metadata-property — Disallows use of host within components

Why Codelyzer is Amazing

Codelyzer is amazing, because it’s a great example of a situation where one should think harder, instead of work harder. In this instance, by thinking ahead, and finding the right tool, it can make all the difference in your application. True, you could implement these a11y compliant linting rules later on. However, having these Codelyzer a11y compliant rules available ahead of time will make you cognizant of everything to begin with. Front-loading things ahead of time, while developing new features, will always make things easier long term. Ok, so in practical terms, how does one implement Codelyzer?


Angular CLI and Codelyzer

Surprise if not already aware, Angular CLI will actually include Codelyzer out of the box. However, Codelyzer will not include a11y rules by default, as these are all ”experimental”. AKA not enough people care about enough to make it a default. So, if you want to go ahead and include these into your application, you will have to physically add them to the tslint.json file.

Install Codelyzer If Not Using CLI

We are assuming you have Codelyzer installed already due to the fact that Angular CLI/NX by default installs Codelyzer. If you do not have it installed, feel free to run the following:

npm i codelyzer --save-dev;

Add rules to tslint.json

The following are the rules that suggested by the Codelyzer team as of now to add accessibility to your application:

{
  "rulesDirectory": [
    "codelyzer"
  ],
  "rules": {
    ...,
    "template-accessibility-alt-text": true,
    "template-accessibility-elements-content": true,
    "template-accessibility-label-for": true,
    "template-accessibility-tabindex-no-positive": true,
    "template-accessibility-table-scope": true,
    "template-accessibility-valid-aria": true,
    "template-click-events-have-key-events": true,
    "template-mouse-events-have-key-events": true,
    "template-no-autofocus": true,
    "template-no-distracting-elements": true
  }
}

Granted you have tslint enabled within your code editor, there will be two scenarios in which you can take advantage of these rules.

1.From within your Typescript files. 2. Whenever you run ng lint over entire project. You can tie ng lint into your CI/CD process, of course, to make sure the project is thrown back if these ng lint rules do not pass.

It is important to note there are other tools on accessibility that Razroo recommends as well. I.e. Lighthouse and Axe. We will get to those soon. However, within the context of linting, Codelyzer is the only tool you will need in your dev toolchain.

Congrats, you are now a pro when it comes to accessibility and linting! Woo!!!

More articles similar to this

footer

Razroo is committed towards contributing to open source. Take the pledge towards open source by tweeting, #itaketherazroopledge to @_Razroo on twitter. One of our associates will get back to you and set you up with an open source project to work on.