@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.

* [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)