[AngularJS] Accessible Button Events
Often buttons need to be handled by JavaScript, and if done improperly it can lead to accessibility issues. In this lesson you will improve a major news organization's global header with some basic HTML and JavaScript.
Normal you should use native 'button' to make a button instead of use other html element to make a button, then you can access the button thought the keyboard.
If you use a 'div', then what you should do to make it accessible to the user by keyborad, you should add 'role', 'tabindex' & 'aria-label' to it:
<button aria-label="Help">
<i class="icon icon-help"></i>
</button> <div class="button" role="button" tabindex="0" aria-label="Menu">
<i class="icon icon-menu"></i>
</div>
If you use AngularJS,and you want press 'Enter' to get the handle event, you should add 'ng-keydown' for it:
<button aria-label="Help" ng-click="doStuff()">
<i class="icon icon-help"></i>
</button> <div class="button" role="button" tabindex="0" aria-label="Menu" ng-click="doStuff()" ng-keydown="doStuff()">
<i class="icon icon-menu"></i>
</div>
[AngularJS] Accessible Button Events的更多相关文章
- Part 39 AngularJS route change events
In this video we will discuss1. Different events that are triggered when a route change occurs in an ...
- Angularjs学习笔记1_基本技巧
10.AngularJS ng-click <button ng-click="clickCounter = clickCounter + 1">Click Me! ...
- AngularJs MVC 详解
为什么在前端也需要MVC 1.代码规模越来越大,切分职责是大势所趋 2.为了复用 3.为了后期维护方便 MVC的目的是为了模块化和复用 前端实现MVC的困难 1.操作DOM必须等整个页面加载完 2.多 ...
- AngularJS的控制器示例
代码下载:https://files.cnblogs.com/files/xiandedanteng/angularjsCtrl.rar 代码: <!DOCTYPE HTML PUBLIC &q ...
- Best Practices for Speeding Up Your Web Site
The Exceptional Performance team has identified a number of best practices for making web pages fast ...
- [转载]Best Practices for Speeding Up Your Web Site
原文:http://developer.yahoo.com/performance/rules.html 提升网站加载速度的一些优化技巧,大部分在前端层面. 不知道是多久以前写的,看起来有些已经过时了 ...
- 札记:android手势识别,MotionEvent
摘要 本文是手势识别输入事件处理的完整学习记录.内容包括输入事件InputEvent响应方式,触摸事件MotionEvent的概念和使用,触摸事件的动作分类.多点触摸.根据案例和API分析了触摸手势T ...
- [蓝牙] 3、 剖析BLE心率检测工程
位于:<KEIL path> \ARM\Device\Nordic\nrf51822\Board\pca10001\s110\ble_app_hrs Heart Rate Example ...
- 如何将GridViewEX升级到UWP(Universal Windows Platform)平台
引言 上一篇文章中,我们主要讲解了如何在保证GridView控件的用户体验基础上,扩展GridView生成GridViewEx控件,增加动态添加新分组功能等,本文在上文的基础上,介绍如何在Window ...
随机推荐
- android studio 安装总结
Android Studio 的安装和配置篇(Windows篇<转> http://www.jianshu.com/p/fc03942548cc# 中间gradle下载比较慢:解决方法 需 ...
- ZBreak
https://github.com/atskyline/ZBreak 最近用电脑用的多,总觉得有必要2个小时休息一会.就花了一点点时间写了这个小东西如果连续使用电脑超过2个小时会弹出一个窗口提示. ...
- 【Python】Python-skier游戏[摘自.与孩子一起学编程]
这是一个滑雪者的游戏. skier从上向下滑,途中会遇到树和旗子,捡起一个旗子得10分,碰到一颗树扣100分,可以用左右箭头控制skier方向. 准备素材 一 准备python环境:我下载的pytho ...
- FZU 2214 Knapsack dp (转化背包)
就是一个背包裸题,由于物品的重量太大,开不了这么大的数组 所以转化一下,由于价值总和不大于5000,所以把价值看作重量,重量看作价值,那么就是同样的价值下,求一个最轻的重量 #include<c ...
- e2e 自动化集成测试 架构 实例 WebStorm Node.js Mocha WebDriverIO Selenium Step by step (三) SqlServer数据库的访问
上一篇文章“e2e 自动化集成测试 架构 京东 商品搜索 实例 WebStorm Node.js Mocha WebDriverIO Selenium Step by step 二 图片验证码的识别” ...
- Android_1_渐变背景色
首先创建一个渐变背景色文件drawable-mdpi/bg_color.xml <?xml version="1.0" encoding="utf-8"? ...
- 设计模式_Composite_合成模式
形象例子: Mary今天过生日.“我过生日,你要送我一件礼物.”“嗯,好吧,去 商店,你自己挑.”“这件T恤挺漂亮,买,这条裙子好看,买,这个包也不错,买.”“喂,买了三件了呀,我只答应送一件礼物的哦 ...
- C/C++:原码、反码和补码
正数的原码.反码和补码是一模一样的. 负数的反码的符号位跟原码一样,但其余各位取反. 负数的补码是其反码的最末位加1得到,即原码取反加1. 补码的补码就是原码. 浮点数的存储格式随着机器的 ...
- oracle修改process和session数
第一步:连接服务器,输入sqlplus 第二步:以sysdba身份登陆 第三步:查看和修改processes和sessions参数 1. 查看processes和sessions参数 select * ...
- HDU 1029 Ignatius and the Princess IV DP
kuangbin 专题 这题,有很多种解法. 第一种: 直接比较每个数出现次数. #include<iostream> #include<string> #include< ...