Accessibility is an often overlooked essential feature of a web application. a11y Is a critical component of your AngularJS application. It should be considered early in an applications life. The ng-aria module gets you started quickly, adding instant upgrades to your Angular app's accessibility.
Want to learn more about accessibility and AngularJS? Check out this great talk:AngularJS Accessibility by Marcy Sutton at ng-europe 2014.
Read More: http://jsbin.com/jopex/2/edit
HTML CSS JS Result Edit on <html> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-aria.js"></script> <script src="app.js"></script> <title>Egghead Lesson by kentcdodds</title> </head> <body ng-app="app" ng-controller="MainCtrl as vm"> <h1>Angular version: {{vm.angularVersion}}</h1> <h2> {{vm.lessonTitle || 'Angular Lesson'}} <small>by <a href="http://twitter.com/kentcdodds">@kentcdodds</a></small> </h2> <hr /> <h2>Demo</h2> <form ng-init="vm.radio='1'"> Input Email:<br /><input type="email" show-attrs ng-model="vm.input" /> Textarea:<br /><textarea show-attrs ng-model="vm.textarea"></textarea> Radio:<br /> <input name="myRadio" show-attrs type="radio" ng-model="vm.radio" value="1" /> <input name="myRadio" show-attrs type="radio" ng-model="vm.radio" value="2" /> Checkbox:<br /><input show-attrs type="checkbox" ng-model="vm.checkbox" /> Range:<br /><input show-attrs type="range" ng-model="vm.range" min="0" max="25" /> Hide/Show:<input type="checkbox" ng-model="vm.show" /><input show-attrs ng-show="vm.show" ng-model="hidden" /> Invalid:<br /><input show-attrs type="email" ng-model="vm.email" /> Required:<br /><input show-attrs ng-model="vm.required" required /> Disabled:<input type="checkbox" ng-model="vm.disable" /><br /><button show-attrs type="submit" ng-disabled="vm.disable">Submit</button> </form> </body> </html>
/** * Created by Answer1215 on 11/14/2014. */ var app = angular.module('app', ['ngAria']); app.controller('MainCtrl', function MainCtrl() { 'use strict'; var vm = this; vm.angularVersion = angular.version.full; vm.lessonTitle = 'How to use the ngAria module'; }); app.directive('showAttrs', function() { return function(scope, el, attrs) { var pre = document.createElement('pre'); el.after(pre); scope.$watch(function() { var attrs = {}; Array.prototype.slice.call(el[0].attributes, 0).forEach(function(item) { if (item.name !== 'show-attrs') { attrs[item.name] = item.value; } }); return attrs; }, function(newAttrs, oldAttrs) { pre.innerText = JSON.stringify(newAttrs, null, 2); }, true); } });
Also in angular.config(), you can use $ariaProvider to disable some aria value:
- ariaHidden –
{boolean}– Enables/disables aria-hidden tags - ariaChecked –
{boolean}– Enables/disables aria-checked tags - ariaDisabled –
{boolean}– Enables/disables aria-disabled tags - ariaRequired –
{boolean}– Enables/disables aria-required tags - ariaInvalid –
{boolean}– Enables/disables aria-invalid tags - ariaMultiline –
{boolean}– Enables/disables aria-multiline tags - ariaValue –
{boolean}– Enables/disables aria-valuemin, aria-valuemax and aria-valuenow tags - tabindex –
{boolean}– Enables/disables tabindex tags
var app = angular.module('app', ['ngAria']) .config(function($ariaProvider){ $ariaProvider.config({ ariaInvalid: true }) });
