mirror of
https://github.com/zhigang1992/angular.js.git
synced 2026-04-05 22:35:14 +08:00
62 lines
1.7 KiB
Plaintext
62 lines
1.7 KiB
Plaintext
@ngdoc overview
|
|
@name Accessibility
|
|
@sortOrder 530
|
|
@description
|
|
|
|
|
|
# Accessibility with ngAria
|
|
|
|
You can use the `ngAria` module to have common ARIA attributes automatically applied when you
|
|
use certain directives. To enable `ngAria`, just require the module into your application and
|
|
the code will hook into your ng-show/ng-hide, input, textarea, button, select and
|
|
ng-required directives and add the appropriate ARIA states and properties.
|
|
|
|
Currently, the following attributes are implemented:
|
|
* aria-hidden
|
|
* aria-checked
|
|
* aria-disabled
|
|
* aria-required
|
|
* aria-invalid
|
|
* aria-multiline
|
|
* aria-valuenow
|
|
* aria-valuemin
|
|
* aria-valuemax
|
|
* tabindex
|
|
|
|
You can disable individual attributes by using the `{@link ngAria.$ariaProvider#config config}` method.
|
|
|
|
###Example
|
|
|
|
```js
|
|
angular.module('myApp', ['ngAria'])...
|
|
```
|
|
|
|
Elements using `ng-model` with `required` or `ngRequired` directives will automatically have
|
|
`aria-required` attributes with the proper corresponding values.
|
|
|
|
```html
|
|
<material-input ng-model="val" required>
|
|
```
|
|
|
|
Becomes:
|
|
|
|
```html
|
|
<material-input ng-model="val" required aria-required="true">
|
|
```
|
|
|
|
ngAria is just a starting point. You'll have to manually choose how to implement some
|
|
accessibility features.
|
|
|
|
For instance, you may want to add `ng-keypress` bindings alongside `ng-click` to make keyboard
|
|
navigation easier.
|
|
|
|
|
|
## Additional Resources
|
|
|
|
Accessibility best practices that apply to web apps in general also apply to Angular.
|
|
|
|
* [A11Y Project](http://a11yproject.com/)
|
|
* [WebAim](http://webaim.org/)
|
|
* [Using WAI-ARIA in HTML](http://www.w3.org/TR/2014/WD-aria-in-html-20140626/)
|
|
* [Apps For All: Coding Accessible Web Applications](https://shop.smashingmagazine.com/apps-for-all-coding-accessible-web-applications.html)
|