Improve this Doc

ngAria

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 as a dependency. The directives supported by ngAria are: ngModel, ngDisabled, ngShow, ngHide, ngClick, ngDblClick, and ngMessages.

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

Directive	Supported Attributes
ngModel	aria-checked, aria-valuemin, aria-valuemax, aria-valuenow, aria-invalid, aria-required
ngDisabled	aria-disabled
ngShow	aria-hidden
ngHide	aria-hidden
ngClick	tabindex, keypress event
ngDblclick	tabindex
ngMessages	aria-live

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 Attributes

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

Installation

First include angular-aria.js in your HTML:

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

You can download this file from the following places:

• Google CDN
  e.g. //ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-aria.js
• Bower
  e.g.

  bower install angular-aria@X.Y.Z

• code.angularjs.org
  e.g.

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

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

Then 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!