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 - -``` + + + +
+
+ + + Custom Checkbox + +
+
+ +
+
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. + + + + +
+
+ Div with ngModel and aria-invalid disabled +
+
+ + Custom Checkbox for comparison +
+
+ +
+
##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.