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. 【欧拉回路】UVA - 10054 The Necklace

    题目大意: 一个环被切割成了n个小块,每个小块有头尾两个关键字,表示颜色. 目标是判断给出的n个小块能否重构成环,能则输出一种可行解(按重构次序输出n个色块的头尾颜色).反之输出“some beads ...

  2. GDB 调试工具高级用法

    解决core核心文件转出问题 ulimit -c #查看core文件的生成开关,若为0则关闭 ulimit -c unlimited #打开开关,只在当前shell生效 sudo sh -c 'ech ...

  3. TCP/IP——基础概念简记

    TCP/IP协议族的分层: 应用层 运输层 网络层 链路层 互联网地址(IP地址):互联网上的每个接口必须有一个唯一的Internet地址,它一定的结构,分为ABCDE五类.A类保留给政府机构,B类分 ...

  4. Scrapy学习篇(三)之创建项目

    创建项目 创建项目是爬取内容的第一步,之前已经讲过,Scrapy通过scrapy startproject <project_name>命令来在当前目录下创建一个新的项目. 下面我们创建一 ...

  5. [APIO2015]巴厘岛的雕塑 --- 贪心 + 枚举

    [APIO2015]巴厘岛的雕塑  题目描述 印尼巴厘岛的公路上有许多的雕塑,我们来关注它的一条主干道. 在这条主干道上一共有\(N\)座雕塑,为方便起见,我们把这些雕塑从 1 到\(N\)连续地进行 ...

  6. HDU3853 LOOPS 期望DP 简单

    http://acm.hdu.edu.cn/showproblem.php?pid=3853 有一点坑的地方是如果一个地方停在原地的概率为1,那么该地的期望为0,就相当于这个地方也是一个出口...   ...

  7. [HAOI2012]外星人

    题目大意: 告诉你一个数n,求满足φ^x(n)=1的x. 思路: 首先我们可以发现满足φ(n)=1的数只有2,也就是说你得到最终的结果,最后一步肯定是φ(2). 同时,可以发现φ(φ(2^k))=φ( ...

  8. 在活动中使用菜单(Menu)

    任务名称:在活动使用菜单 任务现象:打开程序后,点击菜单按钮会出现2个选项,点击选项时会跳出相对应的提示框 步骤 1.创建一个项目,详细参考:http://8c925c9a.wiz03.com/sha ...

  9. 设计模式 -- 访问者模式(Visitor)

    写在前面的话:读书破万卷,编码如有神--------------------------------------------------------------------主要内容包括: 初识访问者模 ...

  10. Codeforces Beta Round #10 A. Power Consumption Calculation 水题

    A. Power Consumption Calculation 题目连接: http://www.codeforces.com/contest/10/problem/A Description To ...