[AngularJS] Angular1.3 ngAria - 1

时间：2023-03-10 04:01:49
[AngularJS] Angular1.3 ngAria - 1

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);

    }

});

[AngularJS] Angular1.3 ngAria - 1

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

        })

    });

[AngularJS] Angular1.3 ngAria - 1

相关文章