Improve this Doc View Source $aria

From Get docs
< Improve this Doc ngAria‎ | serviceAngularjs/docs/1.8/api/ngaria/service/$aria

Improve this Doc View Source $aria

  1. $ariaProvider
  2. service in module ngAria


The $aria service contains helper methods for applying common ARIA attributes to HTML directives.

ngAria injects common accessibility attributes that tell assistive technologies when HTML elements are enabled, selected, hidden, and more. To see how this is performed with ngAria, let's review a code snippet from ngAria itself:

ngAriaModule.directive('ngDisabled', ['$aria', function($aria) {
  return $aria.$$watchExpr('ngDisabled', 'aria-disabled', nativeAriaNodeNames, false);

Shown above, the ngAria module creates a directive with the same signature as the traditional ng-disabled directive. But this ngAria version is dedicated to solely managing accessibility attributes on custom elements. The internal $aria service is used to watch the boolean attribute ngDisabled. If it has not been explicitly set by the developer, aria-disabled is injected as an attribute with its value synchronized to the value in ngDisabled.

Because ngAria hooks into the ng-disabled directive, developers do not have to do anything to enable this feature. The aria-disabled attribute is automatically managed simply as a silent side-effect of using ng-disabled with the ngAria module.

The full list of directives that interface with ngAria:

  • ngModel
  • ngChecked
  • ngReadonly
  • ngRequired
  • ngDisabled
  • ngValue
  • ngShow
  • ngHide
  • ngClick
  • ngDblclick
  • ngMessages

Read the ngAria Developer Guide for a thorough explanation of each directive.


Requires the ngAria module to be installed.

© 2010–2020 Google, Inc.
Licensed under the Creative Commons Attribution License 3.0.$aria