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:
You can disable individual attributes by using the config
method.
angular.module('myApp', ['ngAria'])...
Elements using ng-model
with required
or ngRequired
directives will automatically have
aria-required
attributes with the proper corresponding values.
<material-input ng-model="val" required>
Becomes:
<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.
Accessibility best practices that apply to web apps in general also apply to Angular.