W3cubDocs

/Angular.js 1.5

Improve this Doc ngAria

Installation

First, get the file:

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:

Directive Supported Attributes
ngModel aria-checked, aria-valuemin, aria-valuemax, aria-valuenow, aria-invalid, aria-required, input roles
ngDisabled aria-disabled
ngRequired aria-required
ngChecked aria-checked
ngReadonly aria-readonly
ngValue aria-checked
ngShow aria-hidden
ngHide aria-hidden
ngDblclick tabindex
ngMessages aria-live
ngClick tabindex, keypress event, button role

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

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.

Module Components

Provider

Name Description
$ariaProvider

Used for configuring the ARIA attributes injected and managed by ngAria.

Service

Name Description
$aria

© 2010–2017 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://code.angularjs.org/1.5.11/docs/api/ngAria