diff --git a/docs/content/api/index.ngdoc b/docs/content/api/index.ngdoc
index 13a7b865167b..2eb8125f6975 100644
--- a/docs/content/api/index.ngdoc
+++ b/docs/content/api/index.ngdoc
@@ -161,6 +161,27 @@ or JavaScript callbacks.
+## {@link ngAria ngAria}
+
+Use ngAria to inject common accessibility attributes into directives and improve the experience for users with disabilities.
+
+
Include the **angular-aria.js** file and set ngAria as a dependency for this to work in your application.
+
+
+
+
+ {@link ngAria#service Services}
+ |
+
+
+ The {@link ngAria.$aria $aria} service contains helper methods for applying ARIA attributes to HTML.
+
+
+ {@link ngAria.$ariaProvider $ariaProvider} is used for configuring ARIA attributes.
+
+ |
+
+
## {@link ngResource ngResource}
diff --git a/docs/content/guide/accessibility.ngdoc b/docs/content/guide/accessibility.ngdoc
index d106cb66cdbb..609a7547f417 100644
--- a/docs/content/guide/accessibility.ngdoc
+++ b/docs/content/guide/accessibility.ngdoc
@@ -12,7 +12,7 @@ assistive technologies used by persons with disabilities.
##Including ngAria
-Using ngAria is as simple as requiring the ngAria module in your application. ngAria hooks into
+Using {@link ngAria ngAria} is as simple as requiring the ngAria module in your application. ngAria hooks into
standard AngularJS directives and quietly injects accessibility support into your application
at runtime.
@@ -20,6 +20,15 @@ at runtime.
angular.module('myApp', ['ngAria'])...
```
+###Using ngAria
+Most of what ngAria does is only visible "under the hood". To see the module in action, once you've
+added it as a dependency, you can test a few things:
+ * Using your favorite element inspector, look for ngAria attributes in your own code.
+ * Test using your keyboard to ensure `tabindex` is used correctly.
+ * Fire up a screen reader such as VoiceOver to listen for ARIA support.
+[Helpful screen reader tips.](http://webaim.org/articles/screenreader_testing/)
+
+##Supported directives
Currently, ngAria interfaces with the following directives:
* ngModel
@@ -31,7 +40,7 @@ Currently, ngAria interfaces with the following directives:
ngModel
-Most of ngAria's heavy lifting happens in the [ngModel](https://docs.angularjs.org/api/ng/directive/ngModel)
+Most of ngAria's heavy lifting happens in the {@link ngModel ngModel}
directive. For elements using ngModel, special attention is paid by ngAria if that element also
has a a role or type of `checkbox`, `radio`, `range` or `textbox`.
@@ -47,15 +56,80 @@ attributes (if they have not been explicitly specified by the developer):
###Example
-```html
-
-```
-
-Becomes:
-
-```html
-
-```
+
+
+
+
+
+
+
+
+
ngAria will also add `tabIndex`, ensuring custom elements with these roles will be reachable from
the keyboard. It is still up to **you** as a developer to **ensure custom controls will be
@@ -106,6 +180,24 @@ screen reader users won't accidentally focus on "mystery elements". Managing tab
child control can be complex and affect performance, so it’s best to just stick with the default
`display: none` CSS. See the [fourth rule of ARIA use](http://www.w3.org/TR/aria-in-html/#fourth-rule-of-aria-use).
+###Example
+```css
+.ng-hide {
+ display: block;
+ opacity: 0;
+}
+```
+```html
+
+```
+
+Becomes:
+
+```html
+
+```
+*Note: Child links, buttons or other interactive controls must also be removed from the tab order.*
+
ngHide
>The [ngHide](https://docs.angularjs.org/api/ng/directive/ngHide) directive shows or hides the
@@ -116,26 +208,128 @@ The default CSS for `ngHide`, the inverse method to `ngShow`, makes ngAria redun
`aria-hidden` on the directive when it is hidden or shown, but the content is already hidden with
`display: none`. See explanation for ngShow when overriding the default CSS.
-ngClick and ngDblClick
-If `ngClick` or `ngDblClick` is encountered, ngAria will add `tabIndex` if it isn't there already.
-Even with this, you must currently still add `ng-keypress` to non-interactive elements such as
-`` or `
` to enable keyboard access. I have recommended this also bind
-`ng-keypress` to be more useful; the conversation is [currently ongoing](https://github.com/angular/angular.js/issues/9254).
+ngClick and ngDblclick
+If `ng-click` or `ng-dblclick` is encountered, ngAria will add `tabindex` if it isn't there already.
+Even with this, you must currently still add `ng-keypress` to non-interactive elements such as `div`
+or `taco-button` to enable keyboard access. Conversation is currently ongoing about whether ngAria
+should also bind `ng-keypress`.
-* * *
+Example
+```html
+
+```
-##Disabling attributes
-The attribute magic of ngAria may not work for every scenario. To disable individual attributes,
-you can use the `{@link ngAria.$ariaProvider#config config}` method:
+Becomes:
+```html
+
+```
+*Note: ngAria still requires `ng-keypress` to be added manually to non-native controls like divs.*
+
+ngMessages
+The new ngMessages module makes it easy to display form validation or other messages with priority
+sequencing and animation. To expose these visual messages to screen readers,
+ngAria injects `aria-live="polite"`, causing them to be read aloud any time a message is shown,
+regardless of the user's focus location.
+###Example
+
+```html
+
+
You did not enter a field
+
Your field is too long
+
```
-angular.module('myApp', ['ngAria'], function config($ariaProvider) {
- $ariaProvider.config({
- tabindex: false
- });
-});
+
+Becomes:
+
+```html
+
+
You did not enter a field
+
Your field is too long
+
```
-* * *
+
+##Disabling attributes
+The attribute magic of ngAria may not work for every scenario. To disable individual attributes,
+you can use the {@link ngAria.$ariaProvider#config config} method. Just keep in mind this will
+tell ngAria to ignore the attribute globally.
+
+
+
+
+
+
+
+
##Common Accessibility Patterns
@@ -164,6 +358,7 @@ Accessibility best practices that apply to web apps in general also apply to Ang
* [Using ARIA in HTML](http://www.w3.org/TR/aria-in-html/)
* [AngularJS Accessibility at ngEurope](https://www.youtube.com/watch?v=dmYDggEgU-s&list=UUEGUP3TJJfMsEM_1y8iviSQ)
+ * [Testing with Screen Readers](http://webaim.org/articles/screenreader_testing/)
* [Chrome Accessibility Developer Tools](https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en)
* [W3C Accessibility Testing](http://www.w3.org/wiki/Accessibility_testing)
* [WebAIM](http://webaim.org)
diff --git a/src/ngAria/aria.js b/src/ngAria/aria.js
index 1aef6293d9ac..52538bc0db2a 100644
--- a/src/ngAria/aria.js
+++ b/src/ngAria/aria.js
@@ -5,33 +5,49 @@
* @name ngAria
* @description
*
- * The `ngAria` module provides support for adding ARIA
- * attributes that convey state or semantic information about the application in order to allow assistive technologies
- * to convey appropriate information to persons with disabilities.
+ * The `ngAria` module provides support for common
+ * [ARIA](http://www.w3.org/TR/wai-aria/)
+ * attributes that convey state or semantic information about the application for users
+ * of assistive technologies, such as screen readers.
*
*
*
- * # Usage
- * To enable the addition of the ARIA tags, just require the module into your application and the tags will
- * hook into your ng-show/ng-hide, input, textarea, button, select and ng-required directives and adds the
- * appropriate ARIA attributes.
+ * ## Usage
*
- * Currently, the following ARIA attributes are implemented:
+ * 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`.
*
- * + aria-hidden
- * + aria-checked
- * + aria-disabled
- * + aria-required
- * + aria-invalid
- * + aria-multiline
- * + aria-valuenow
- * + aria-valuemin
- * + aria-valuemax
- * + tabindex
+ * Below is a more detailed breakdown of the attributes handled by ngAria:
*
- * You can disable individual ARIA attributes by using the {@link ngAria.$ariaProvider#config config} method.
+ * | Directive | Supported Attributes |
+ * |---------------------------------------------|----------------------------------------------------------------------------------------|
+ * | {@link ng.directive:ngModel ngModel} | aria-checked, aria-valuemin, aria-valuemax, aria-valuenow, aria-invalid, aria-required |
+ * | {@link ng.directive:ngDisabled ngDisabled} | aria-disabled |
+ * | {@link ng.directive:ngShow ngShow} | aria-hidden |
+ * | {@link ng.directive:ngHide ngHide} | aria-hidden |
+ * | {@link ng.directive:ngClick ngClick} | tabindex |
+ * | {@link ng.directive:ngDblclick ngDblclick} | tabindex |
+ * | {@link module:ngMessages ngMessages} | aria-live |
+ *
+ * Find out more information about each directive by reading the
+ * {@link guide/accessibility ngAria Developer Guide}.
+ *
+ * ##Example
+ * Using ngDisabled with ngAria:
+ * ```html
+ *
+ * ```
+ * Becomes:
+ * ```html
+ *
+ * ```
+ *
+ * ##Disabling Attributes
+ * It's possible to disable individual attributes added by ngAria with the
+ * {@link ngAria.$ariaProvider#config config} method. For more details, see the
+ * {@link guide/accessibility Developer Guide}.
*/
-
/* global -ngAriaModule */
var ngAriaModule = angular.module('ngAria', ['ng']).
provider('$aria', $AriaProvider);
@@ -42,10 +58,20 @@ var ngAriaModule = angular.module('ngAria', ['ng']).
*
* @description
*
- * Used for configuring ARIA attributes.
+ * Used for configuring the ARIA attributes injected and managed by ngAria.
+ *
+ * ```js
+ * angular.module('myApp', ['ngAria'], function config($ariaProvider) {
+ * $ariaProvider.config({
+ * ariaValue: true,
+ * tabindex: false
+ * });
+ * });
+ *```
*
* ## Dependencies
* Requires the {@link ngAria} module to be installed.
+ *
*/
function $AriaProvider() {
var config = {
@@ -108,7 +134,41 @@ function $AriaProvider() {
*
* @description
*
- * Contains helper methods for applying ARIA attributes to HTML
+ * The $aria service contains helper methods for applying common
+ * [ARIA](http://www.w3.org/TR/wai-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:
+ *
+ *```js
+ * ngAriaModule.directive('ngDisabled', ['$aria', function($aria) {
+ * return $aria.$$watchExpr('ngDisabled', 'aria-disabled');
+ * }])
+ *```
+ * 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. 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**
+ * * **ngShow**
+ * * **ngHide**
+ * * **ngClick**
+ * * **ngDblclick**
+ * * **ngMessages**
+ * * **ngDisabled**
+ *
+ * Read the {@link guide/accessibility ngAria Developer Guide} for a thorough explanation of each
+ * directive.
+ *
*
* ## Dependencies
* Requires the {@link ngAria} module to be installed.