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

        })

    });

[AngularJS] Angular1.3 ngAria - 1的更多相关文章

  1. Directive Controller And Link Timing In AngularJS

    I've talked about the timing of directives in AngularJS a few times before. But, it's a rather compl ...

  2. 说说Angular中的$timeOut定时器

     非常不幸的一点是,人们似乎常常将AngularJS中的$timeOut()函数看做是一个内置的.无须在意的函数.但是,如果你忘记了$timeOut()的回调函数将会造成非常不好的影响,你可能会因此遇 ...

  3. browser-sync & http server

    browser-sync & http server browser-sync https://www.browsersync.io/ usage # step 1 $ npm install ...

  4. $timeout()定时器

    非常不幸的一点是,人们似乎常常将AngularJS中的$timeOut()函数看做是一个内置的.无须在意的函数.但是,如果你忘记了$timeOut()的回调函数将会造成非常不好的影响,你可能会因此遇到 ...

  5. [AngularJS] Angular 1.3 ngAria - 2

    This is an highlight about ngAira in Angular Document abou ngAira Where can use ngAria? Currently, n ...

  6. Angular企业级开发(1)-AngularJS简介

    AngularJS介绍 AngularJS是一个功能完善的JavaScript前端框架,同时是基于MVC(Model-View-Controller理念的框架,使用它能够高效的开发桌面web app和 ...

  7. AngularJS的基础元素应用

    <!doctype html> <!-- 标记ng-app告诉AngularJS处理整个HTML页并引导应用 --> <html ng-app> <head& ...

  8. angular1.x的简单介绍 (一)

    angular1.x作为经典的mvc框架,可以创建能够复用的组件,也可进行双向数据绑定.国内的vue.js/avaloon.js都是同类型的框架.适合使用angularjs的项目有大型信息化管理系统: ...

  9. 带你走近AngularJS - 基本功能介绍

    带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...

随机推荐

  1. google::proto::message.h

    整了一阵子google  proto message.h, 遇到很多问题,各种百度.google ,估计是用的人不是很多,整的焦头烂额,很多API都不知道该怎么用,只能一点一点的扣,为了方便在这里先简 ...

  2. Linux下c++常用调试

    进程调试 自己写的代码,直接gdb r/bt就可以了. 正在运行的进程,先ps ax找到进程id.然后gdb进入之后attach 进程id.stop/continue暂停和继续进程. core了,有c ...

  3. poj3259（spfa）

    自己的第一道spfa,纪念一下,顺便转载一下spfa的原理.先po代码: #include <iostream> #include <queue> using namespac ...

  4. 【BZOJ 2753】 2753: [SCOI2012]滑雪与时间胶囊 （分层最小树形图，MST）

    2753: [SCOI2012]滑雪与时间胶囊 Time Limit: 50 Sec  Memory Limit: 128 MBSubmit: 2457  Solved: 859 Descriptio ...

  5. 【51Nod 1756】【算法马拉松 23】谷歌的恐龙

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1765 设答案为\(X\). 则\[X=\frac{m}{n}\times ...

  6. 性能测试工具——Jmeter使用小结（一）

    Apache Jmeter是针对Java的一款性能测试工具,利用该工具可以实现自动化的批量测试和结果聚合,适合做接口压测.今天就来捋一捋软件安装的一些小细节和使用. 一.安装 Jmeter基于JDK, ...

  7. 2015 UESTC 搜索专题C题 基爷与加法等式 爆搜DFS

    基爷与加法等式 Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/contest/show/61 Desc ...

  8. 一步一步创建JAVA线程

    (一)创建线程 要想明白线程机制,我们先从一些基本内容的概念下手. 线程和进程是两个完全不同的概念,进程是运行在自己的地址空间内的自包容的程序,而线程是在进程中的一个单一的顺序控制流,因此,单个进程可 ...

  9. svn 服务器搭建及使用 三

    SVN服务器搭建和使用(三) 接下来,试试用TortoiseSVN修改文件,添加文件,删除文件,以及如何解决冲突等. 添加文件 在检出的工作副本中添加一个Readme.txt文本文件,这时候这个文本文 ...

  10. Struts+HIbernate+Spring

    1.Struts 取代JSP中的控制功能,为系统添加独立的控制,采用Struts引入标签,实现JSP与后台JAVA代码的分离,JSP只负责显示,与struts.xml配合实现页面跳转 实现:接收请求, ...