ngAria
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:
//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-aria.js
bower install angular-aria@X.Y.Z
"//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!
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.
For ngAria to do its magic, simply include the module ngAria
as a dependency. The following
directives are supported:
ngModel
, ngChecked
, 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 |
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">
It's possible to disable individual attributes added by ngAria with the config method. For more details, see the Developer Guide.
Name | Description |
---|---|
$ariaProvider | Used for configuring the ARIA attributes injected and managed by ngAria. |
Name | Description |
---|---|
$aria |