ARIA Accessibility in Angular 2 and 4

Question

I have been manually including ARIA attributes in my component templates when I came across the angular-aria module: https://docs.angularjs.org/api/ngAria

However, this is for AngularJS. Is there any equivalent module for Angular 2 and 4 which silently injects aria attributes on components at runtime?

I have looked at this question: How do I include ngAria in and Angular 2 application? but it doesn't seem to have an answer.

Answer 1

Your question has a short answer and a long one, let's see what are those?

Is there any equivalent module for Angular 2 and 4 which silently injects aria attributes on components at runtime?

Let's first refer to the KB for AngularJs:

Using ngAria is as simple as requiring the ngAria module in your application. ngAria hooks into standard AngularJS directives and quietly injects accessibility support into your application at runtime.

As Angular 2 has tried to have a built-in support for ARIA, there is no such equivalent module needed, and there is no supplementary one which I'm aware of.

So, Yes, it's implicitly supported, and No, there is no such a module (required).

Accessibility use cases for Angular include, at least: (Quoted from Marcy Sutton)

• Handling aria-disabled, aria-required, and aria-checked for custom controls
• Handling aria-* value attributes on custom controls using ngModel
• Discouraging click events on non-semantic div elements (could be done through documentation)
• Text alternatives: Labels for form controls, alt for images

You can simply investigate the above by inspecting the rendered output of your Angular template.

Final Note: It should be considered, anyway, that still complying manually with the rules of ARIA use are required, which is regardless of the version of the angular(JS or 2+) being use; e.g., avoiding to assign the click events to non-semantic elements, or embedding a giving label to elements which are not labelable.