AngularJS cares about accessibility!

A11y made easy with angular-aria


The ARIA attributes are designed to improve the accessibility of Rich Internet Applications. A more know example is the tabindex:

<form ng-submit="signUp()">
  <input type="text" ng-model="name" tabindex="1">
  <input type="text" ng-model="email" tabindex="2">
  <button tabindex="3">Sign up</button>
</form>

The tabindex attributes in the HTML elements, guide the user through the different controls of the form, making it accessible and also fun to interact with ☺.

Introducing the ngAria


In the 1.3.0-rc3 the angular-aria module was added to the project as a separate module. The ngAria makes a11y easy, adding ARIA attributes automatically to the elements.

Currently, the following ARIA attributes are implemented:

  • aria-hidden
  • aria-checked
  • aria-disabled
  • aria-required
  • aria-invalid
  • aria-multiline
  • aria-valuenow
  • aria-valuemin
  • aria-valuemax
  • tabindex

So that you can write your markup without the ARIA attributes (that honestly, we always forget), because now the ngAria take care of that for you.

Installing


1. Download it via Bower:

bower install —save angular-aria

2. Include the script in the HTML.

<script src="bower_components/angular-aria/angular-aria.js">

3. Declare the ngAria module as a dependency of the app

angular.module('myApp', ['ngAria']);

Profit! Now ngAria is enhancing your markup with ARIA attributes automatically! Isn’t that awesome?

Configuring


All the attributes are included by default. If you want to turn off some of them, all you need to do is inject the $ariaProvider and use it's config method:

angular.module(‘myApp’, [‘ngAria’])
 .config(function($ariaProvider) {
   $ariaProvider.config({
     tabindex: false,
     ariaHidden: false
   });
 });

The ngAria is pretty new and right now has a very little set o features. The good news is that you can always either open issues for file bugs or request features. Even better, submit pull requests with awesome improvements to the core of AngularJS.

Is that all?


Of course not! This is only a little piece of work. You should still follow the best practices to make your apps accessible.

I strong recommend you to take a look at a11yproject.com content for improving your skills.

You should also take a look at some great tools:

A11Y Project checklist

What about you? Do you care about accessibility?