ngAria

Installation

First, get the file:

• Google CDN e.g.

  "//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-aria.js"

• NPM e.g.

  npm install --save angular-aria@X.Y.Z

  or

  yarn add angular-aria@X.Y.Z

• Bower e.g.

  bower install angular-aria#X.Y.Z

• code.angularjs.org (discouraged for production use) e.g.

  "//code.angularjs.org/X.Y.Z/angular-aria.js"

where X.Y.Z is the AngularJS version you are running.

Then, include angular-aria.js in your HTML:

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

Finally, load the module in your application by adding it as a dependent module:

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

With that you're ready to get started!

The ngAria module provides support for common ARIA attributes that convey state or semantic information about the application for users of assistive technologies, such as screen readers.

Usage

For ngAria to do its magic, simply include the module ngAria as a dependency. The following directives are supported: ngModel, ngChecked, ngReadonly, ngRequired, ngValue, ngDisabled, ngShow, ngHide, ngClick, ngDblClick, and ngMessages.

Below is a more detailed breakdown of the attributes handled by ngAria:

Find out more information about each directive by reading the ngAria Developer Guide.

Example

Using ngDisabled with ngAria:

<md-checkbox ng-disabled="disabled">

Becomes:

<md-checkbox ng-disabled="disabled" aria-disabled="true">

Disabling Specific Attributes

It is possible to disable individual attributes added by ngAria with the config method. For more details, see the Developer Guide.

Disabling ngAria on Specific Elements

It is possible to make ngAria ignore a specific element, by adding the ng-aria-disable attribute on it. Note that only the element itself (and not its child elements) will be ignored.