[HTML5] Accessibility Implementation for complex component
When you developing a complex component by your own, one thing you cannot ignore is Accessibility.
Checkout this link. It lists all things you need to do regarding to accessibility when implements a complex component.
The tech we are using is: Roving Focus
Take radio group as an example, when doing roving focus, we set current focus element's:
tabindex = "0 " checked="checked"
And set other elements to:
tabindex="-1"
(function() {
'use strict'; // Define values for keycodes
var VK_ENTER = 13;
var VK_SPACE = 32;
var VK_LEFT = 37;
var VK_UP = 38;
var VK_RIGHT = 39;
var VK_DOWN = 40; // Helper function to convert NodeLists to Arrays
function slice(nodes) {
return Array.prototype.slice.call(nodes);
} function RadioGroup(id) {
this.el = document.querySelector(id);
this.buttons = slice(this.el.querySelectorAll('.radio'));
this.focusedIdx = 0;
this.focusedButton = this.buttons[this.focusedIdx]; this.el.addEventListener('keydown', this.handleKeyDown.bind(this));
} RadioGroup.prototype.handleKeyDown = function(e) {
switch(e.keyCode) { case VK_UP:
case VK_LEFT: { e.preventDefault(); // This seems like a good place to do some stuff :)
if(this.buttons && this.buttons.length && this.focusedIdx > 0) {
this.focusedIdx -= 1;
} else if(this.buttons && this.buttons.length && this.focusedIdx === 0) {
this.focusedIdx = this.buttons.length - 1;
}
break; } case VK_DOWN:
case VK_RIGHT: { e.preventDefault(); // This seems like a good place to do some stuff :)
if(this.buttons && this.buttons.length && this.focusedIdx < this.buttons.length - 1) {
this.focusedIdx += 1;
} else if(this.buttons && this.buttons.length && this.focusedIdx === this.buttons.length - 1) {
this.focusedIdx = 0;
} break;
} } this.changeFocus(this.focusedIdx); // <-- Hmm, interesting...
}; RadioGroup.prototype.changeFocus = function(idx) {
// Set the old button to tabindex -1
this.focusedButton.tabIndex = -1;
this.focusedButton.removeAttribute('checked'); // Set the new button to tabindex 0 and focus it
this.focusedButton = this.buttons[idx];
this.focusedButton.tabIndex = 0;
this.focusedButton.focus();
this.focusedButton.setAttribute('checked', 'checked');
}; var group1 = new RadioGroup('#group1'); }());
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css">
</head>
<body> <div class="demo"> <h3>Drink Options</h3> <ul id="group1" class="radiogroup">
<li tabindex="0" class="radio" checked>
Water
</li>
<li tabindex="-1" class="radio">
Tea
</li>
<li tabindex="-1" class="radio">
Coffee
</li>
<li tabindex="-1" class="radio">
Cola
</li>
<li tabindex="-1" class="radio">
Ginger Ale
</li>
</ul> </div> <script src="radiogroup.js"></script> </body>
</html>
[HTML5] Accessibility Implementation for complex component的更多相关文章
- 说说HTML5中label标签的可访问性问题——张鑫旭
一.开篇叨叨 一般稍微有些经验的页面制作人员都知道label标签可以优雅地扩大表单控件元素的点击区域,例如,单纯的单选框点击区域就鼻屎那么大的地方,经常会点不到位置.因此,label标签的使用对于提高 ...
- (转) [it-ebooks]电子书列表
[it-ebooks]电子书列表 [2014]: Learning Objective-C by Developing iPhone Games || Leverage Xcode and Obj ...
- Frontend Development
原文链接: https://github.com/dypsilon/frontend-dev-bookmarks Frontend Development Looking for something ...
- OSCP Learning Notes - Privilege Escalation
Privilege Escalation Download the Basic-pentesting vitualmation from the following website: https:// ...
- Windows Automation API 3.0 Overview
https://www.codemag.com/article/0810042 While general accessibility requirements (such as font color ...
- 【转】 Understanding Component-Entity-Systems
http://www.gamedev.net/page/resources/_/technical/game-programming/understanding-component-entity-sy ...
- WordPress 主题开发 - (四) 创建WordPress的主题HTML结构 待翻译
Now we're starting to get into the real meat of WordPress Theme development: coding the HTML structu ...
- jquery bootgrid 一个很好的 数据控件,可用于任何语言
http://www.jquery-bootgrid.com/Examples#command-buttons 效果很好,http://www.open-open.com/lib/view/open1 ...
- 【转】谈谈Google Polymer以及Web UI框架的未来
原文转自:http://www.csdn.net/article/2013-05-27/2815450-google-polymer 摘要:开发者Axel Rauschmayer在自己的博客上详解了G ...
随机推荐
- 利用SQLite在android上实现增删改查
利用SQLite在android上实现增删改查 方法: 一.直接利用database.execSQL()方法输入完整sql语句进行操作 这种方法适用于复杂的sql语句,比如多表查询等等 这里适合于增删 ...
- 【POJ 2417】 Discrete Logging
[题目链接] http://poj.org/problem?id=2417 [算法] Baby-Step,Giant-Step算法 [代码] #include <algorithm> #i ...
- grpc vs2015编译
获取gRPC源码 gRPC是开源框架,项目代码在github上,所以首先要安装github.github安装后,在指定文件夹中,执行git命令就可以获取gRPC的所有源码. git clone ht ...
- Java-Spring MVC:JAVA之常用的一些Spring MVC的路由写法以及参数传递方式
ylbtech-Java-Spring MVC:JAVA之常用的一些Spring MVC的路由写法以及参数传递方式 1.返回顶部 1. 常用的一些Spring MVC的路由写法以及参数传递方式. 这是 ...
- Hdu-2892 area 计算几何 圆与凸多边形面积交
题面 题意:有一个凸多边形岛屿,然后告诉你从高空(x,y,h)投下炸弹,爆炸半径r,飞机水平速度和重力加速度,问岛屿被炸了多少 题解:算出来岛屿落地位置,再利用圆与凸多边形面积交 #include&l ...
- java8-3-LambdaMapReduce例子
public class LambdaMapReduce { private static List<User> users = Arrays.asList( new User(1, &q ...
- CI中的分页
根据MVC的思想,分页是需要传数据到模型中,把页码传过去,在模型中根据页码分配: 更多分页类函数可以通过CI手册的分页类查看: $this -> load ->library('pagin ...
- 完美解决ios10及以上Safari无法禁止缩放的问题
移动端web缩放有两种: 1.双击缩放: 2.双指手势缩放. 在iOS 10以前,iOS和Android都可以通过一行meta标签来禁止页面缩放 <meta content="widt ...
- hdu3938 Portal 离线的并查集
离线算法是将全部输入都读入,计算出所有的答案以后再输出的方法.主要是为避免重复计算.类似于计算斐波那契数列的时候用打表的方法. 题目:给一个无向图,求有多少个点对,使得两点间的路径上的花费小于L,这里 ...
- Singleton pattern的线程安全问题
original post from here方法一:同步机制关键词public class Singleton { 2 //利用静态变量来记录Singleton的唯一实例 3 private sta ...