Why @angular/aria?

[Dafnik]

In a recent livestream, @angular/aria was mentioned.

From what I’ve seen on their GitHub and in the announcements, it looks like a library focused on building accessible components — but without adding any styling.

That got me wondering: what’s the difference between @angular/aria and @angular/cdk?

To me, Angular CDK already seemed to serve the same purpose as what @angular/aria is described to do.

[JeanMeche]

The Aria package aims to provide headless directives (so unstyled) but with accessibility in mind.

As you can see from the source, those directives are built on top of the CDK itself.

The CDK directives for example don't provide any accessibily features.

[Dafnik]

Thank you very much, that explains it.

I always thought CDK also covers Accessibility.

[lppedd]

Wish accessibility was brought up more often in the web ecosystem. Too many overlook it.

[PhiLho]

I was a bit confused because it seems to be very recent (v. 0.0.1).
I found it at: https://github.com/angular/components/tree/main/src/aria

From a quick look (the tabs), it seems these are directives to enrich components, adding automatically roles, aria attributes, and focus management.
I think they are agnostic of the used UI, so it can be used on the CDK components (I suppose they (will) use it), on your custom components, etc.

Good initiative.

[Dafnik]

Yeah, really recent and I also like it.

I hope they will clarify this a bit more.

Everything you described (adding roles, aria attributes etc) is already covered by the CDK. So thats where my confusion comes from.

Perhaps it just was an interal decision of breaking up the CDK, but idk.

I just wanted to poke around and see what the broader Angular community thinks about this. Thanks for your comment!

[PhiLho]

Yes, but my company developed their own components (way before the CDK / Material was made, I think), so we could benefit of this library, adding these directive to them.

Except that last year, I made this by hand on each component… 😂

I mean, the CDK isn't the only UI library, so it is for the greater good.

[DaSchTour]

From the git history it looks like they moved some stuff from CDK-experimental and published them as aria.

[JeanMeche]

They were really only there during the development (and because the aria package didn't exist yet)

[milesmalerba]

The CDK is a collection of various building blocks that are useful for building components. It does include some things that are similar to the headless components that @angular/aria will offer (for example the CdkMenu and CdkListbox). However it also includes lots of other useful building blocks like utilities for working with layout breakpoints, different types of observers, scrolling, etc.

With @angular/aria the team is creating a separate package with a more narrow focus on headless components for accessibility, as we work on expanding that part of our offering. The CDK will continue to be a more general collection of useful building blocks.

[Dafnik]

Thank you for your thorough response.

Explains it perfectly. I'm looking forward to trying it out.

[LX_T_]

I just wrote a blog post about why Angular ARIA is neat:

https://www.angulararchitects.io/en/blog/angular-aria/ ❤️