Angular A11y ESLint Rules
Tags: angular, a11y
Published: 2021-11-17 21:33:55

Making a web application accessible can feel like a daunting task, particularly if you aren't used to taking accessibility into consideration.

The [`@angular-eslint`](https://github.com/angular-eslint/angular-eslint) repo includes a number of linting rules that can help enforce accessibility best practices within Angular component templates.

It is important to note, however, that these rules do not check attributes and roles set using the host section of the `@Component` decorator, or ones set using `@HostBinding` decorators.

While passing these rules isn't a guarantee or metric for ensuring full accessibility, it is a step in the right direction.

For convenience, I've divided the rules I will be covering into three groups. The first group, general, covers ARIA roles and attributes. The second group, content, includes rules related to textual representations of content. The last group, interactivity, includes rules pertaining to user interaction and event handling. 

## General Rules

### `@angular-eslint/template/accessibility-valid-aria`

This rule makes sure that all `aria-*` attributes used are valid. The rule will fail if a non-existent `aria-*` attribute is used, or a valid `aria-*` attribute is given an unexpected value.

[Rule Source](https://github.com/angular-eslint/angular-eslint/blob/master/packages/eslint-plugin-template/src/rules/accessibility-valid-aria.ts)


## Content Rules

### `@angular-eslint/template/accesssibility-alt-text`

Checks visual elements `<img>`, `<object>`, `<area>` and `<input>` (of type `'image'`) to make sure they have descriptive text. 

- `<img>` elements must have an `alt` attribute
- `<object>` elements must have either a `title` or `aria-label` attribute
- `<area>` elements must have either an `alt` or `aria-label` attribute
- `<input>` elements with `type='image'` must have either an `alt` or `aria-label` attribute


[Rule Source](https://github.com/angular-eslint/angular-eslint/blob/master/packages/eslint-plugin-template/src/rules/accessibility-alt-text.ts)

Related Guidelines:
- [WCAG Guideline 1.1 - Text Alternatives](https://www.w3.org/TR/WCAG21/#text-alternatives)

### `@angular-eslint/template/accessibility-elements-content`

Checks heading, anchor and button elements to make sure they contain accessible content. This can be in the form of text, binding to `[innerText]`, `[innerHtml]` or `[outerHTML]`, or use of `aria-label` or `title` attributes. 

[Rule Source](https://github.com/angular-eslint/angular-eslint/blob/master/packages/eslint-plugin-template/src/rules/accessibility-elements-content.ts)

Related guidelines:
- [WCAG Guidelines 2.4.6 - Headings and Labels](https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=2410%2C253%2C246#headings-and-labels)
- [WCAG Guidelines 1.3.1 - Info and Relationships](https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=246%2C2410%2C253#info-and-relationships)

### `@angular-eslint/template/accessibility-label-for`

Check that label elements and label components are associated with form elements.

Default behavior expects `label` elements to either be associated with an input element via the `for` attribute, or to contain a `<button>`, `<input>`, `<meter>`, `<output>`, `<progress>`, `<select>`, or `<textarea>` element.

Configuration Options: 
```json
{
	"controlComponents": [], 
	"labelComponents": [], 
	"labelAttributes": []
}
```

- `controlComponents` - Specify  components to treat as input elements (in addition to ones mentioned above)
- `labelComponents` - Specify components to treat as label elements (in addition to `label`)
- `labelAttributes` - Specify attributes that can satisfy label being associated with an input element (in addition to `for` and `htmlFor`)

[Rule Source](https://github.com/angular-eslint/angular-eslint/blob/master/packages/eslint-plugin-template/src/rules/accessibility-label-for.ts)

Related guidelines:
- [WCAG Guidelines 1.3.1 - Info and Relationships](https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=131%2C132%2C246%2C2410%2C253%2C332%2C136#info-and-relationships)
- [WCAG Guidelines 3.3.2 - Labels or Instructions](https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=131%2C136%2C246%2C2410%2C253%2C332#labels-or-instructions)


## Interactivity Rules

### `@angular-eslint/template/no-positive-tabindex`

This rule checks to make sure `tabindex` is only ever being set to `0` (element is tab focusable) or `-1` (element is not tab focusable), and not a positive value that interferes with the automatic tab order of elements.

[Rule Source](https://github.com/angular-eslint/angular-eslint/blob/master/packages/eslint-plugin-template/src/rules/no-positive-tabindex.ts)

Related Guidelines:
- [WCAG Guidelines 2.4.3 - Focus Order](https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=131%2C132%2C136%2C211%2C246%2C2410%2C253%2C332#focus-order)

### `@angular-eslint/template/click-events-have-key-events`

Requires elements with click event handlers also handle at least one key event (`keyup`, `keydown` or `keypress`)

[Rule Source](https://github.com/angular-eslint/angular-eslint/blob/master/packages/eslint-plugin-template/src/rules/click-events-have-key-events.ts)

Related Guidelines:
- [WCAG Guidelines 2.1 - Keyboard Accessible](https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=131%2C132%2C136%2C211%2C246%2C2410%2C253%2C332#keyboard-accessible)

### `@angular-eslint/template/mouse-events-have-key-events`

Requires any element with a `mouseout` event handler to also handle `blur` events, and any element with a `mouseover` event handler to also handle `focus` events.

[Rule Source](https://github.com/angular-eslint/angular-eslint/blob/master/packages/eslint-plugin-template/src/rules/mouse-events-have-key-events-rule.ts)

Related Guidelines:
- [WCAG Guidelines 2.1 - Keyboard Accessible](https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=131%2C132%2C136%2C211%2C246%2C2410%2C253%2C332#keyboard-accessible)


Passing these rules is an easy way to start the journey of making your Angular applications accessible, and hopefully encourage you to consider accessibility as you develop. 

Additional Reading:

- [Angular.io - Accessibility in Angular](https://angular.io/guide/accessibility)
- [Google CodeLabs - Build more accessible Angular apps](https://codelabs.developers.google.com/angular-a11y#0)
- [Accessibility | Web Fundamentals](https://developers.google.com/web/fundamentals/accessibility)
- [Digital.gov - Accessibility for front-end developers](https://accessibility.digital.gov/front-end/getting-started/)