Using ng-aria to automatically improve your AngularJS accessibility

[00:01] ngAria is a new module developed by the Angular core team. Aria stands for Accessible Rich Internet Applications. It consists of a number of HTML attributes that assist those with disabilities who use screen readers and other devices intended to assist them while using your web application.

[00:19] It's actually very simple to use the ngAria module, so I'm just going to show you this little demo application. It's very simple. You have different form controls here. They each are going to demonstrate for us what ngAria will do just out of the box.

[00:36] What you see below each control is a JSON object representing the control's attributes. Here, we have an ng-model vm.input. This input has a class and so on and down the line here.

[00:52] As I said, Aria consists of a number of attributes added to these form controls to help those using assistive devices. ngAria will add these for us automatically. All that you need to do to use ngAria is be sure to include the module via script tag or however else, and then you need to declare it as a dependency.

[01:13] You just ngAria here in your module declaration, and boom. You have ngAria fully loaded in your app, and you don't have to do anything else. Here, we've added a couple of attributes. Now, we have a tabindex and an aria-invalid is false.

[01:35] Here, we have the same on a Textarea, but we also have a multiline. For Radio, we have aria-checked. Here, it's false, so we can toggle between those two. The tabindex is also getting updated automatically for us.

[01:58] Checkbox also has an aria-checked, and then Range has a couple extras. We have aria-valuemin and valuemax. As I move it, you'll see another one, valuenow.

[02:13] Hide and Show. We're hiding and showing this input here, and these attributes represent that input. You can see that aria-hidden is getting changed, and this is using an ng-show.

[02:27] Here, Invalid. This is of type email. If I type an invalid email, you can see aria-invalid is now true. The screen reader can indicate to the user that this field isn't valid. This field is required, as you see here. We'll say, "Hello." Now, aria-required is false, and invalid is false. If I take that away, then those go back to true.

[02:56] Then we have Disabled here. We've disabled that button. It adds the disabled for HTML just in general, but it also adds an aria-disabled true as well. That's the basic gist.

[03:12] Just to illustrate one other thing that ngAria gives you, it provides a new provider called "$aria." In your function config, in your config function, you can inject $ariaProvider. With this, you can enable and disable some specifics of these tags here.

[03:38] We can just say, "$ariaProvider.config," pass it an object, and then whatever you want to enable or disable, it's CamelCased with that dash being the camel. ariaInvalid is false. Now, it won't put invalid on any of our fields.

[04:03] We could do the same for required. We'll go down here. ariaRequired is no longer there. The one that's a little bit interesting is on the Range, we have the aria-valuemin and max and valuenow.

[04:20] For this one, it's just ariaValue, and it will disable all three of those for you there. Now, we don't have that. That's basically all ngAria. These are the things that are supported, and this will just throw those in for you automatically, which is really nice.

[04:42] I want to note that this is not a replacement for actually thinking about accessibility in your application. This just helps with some of the more common things that you definitely need to do, but there's a lot more that's involved with making your web application more accessible.

[04:59] I'd encourage you to look into that, but that's ngAria. Just go ahead and stick it as a dependency, and you really don't need to do anything else. It should be very helpful for your applications and for users with disabilities.