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的更多相关文章

  1. 说说HTML5中label标签的可访问性问题——张鑫旭

    一.开篇叨叨 一般稍微有些经验的页面制作人员都知道label标签可以优雅地扩大表单控件元素的点击区域,例如,单纯的单选框点击区域就鼻屎那么大的地方,经常会点不到位置.因此,label标签的使用对于提高 ...

  2. （转） [it-ebooks]电子书列表

    [it-ebooks]电子书列表   [2014]: Learning Objective-C by Developing iPhone Games || Leverage Xcode and Obj ...

  3. Frontend Development

    原文链接: https://github.com/dypsilon/frontend-dev-bookmarks Frontend Development Looking for something ...

  4. OSCP Learning Notes - Privilege Escalation

    Privilege Escalation Download the Basic-pentesting vitualmation from the following website: https:// ...

  5. Windows Automation API 3.0 Overview

    https://www.codemag.com/article/0810042 While general accessibility requirements (such as font color ...

  6. 【转】 Understanding Component-Entity-Systems

    http://www.gamedev.net/page/resources/_/technical/game-programming/understanding-component-entity-sy ...

  7. WordPress 主题开发 - (四) 创建WordPress的主题HTML结构 待翻译

    Now we're starting to get into the real meat of WordPress Theme development: coding the HTML structu ...

  8. jquery bootgrid 一个很好的 数据控件，可用于任何语言

    http://www.jquery-bootgrid.com/Examples#command-buttons 效果很好,http://www.open-open.com/lib/view/open1 ...

  9. 【转】谈谈Google Polymer以及Web UI框架的未来

    原文转自:http://www.csdn.net/article/2013-05-27/2815450-google-polymer 摘要:开发者Axel Rauschmayer在自己的博客上详解了G ...

随机推荐

  1. 【联系】二项分布的对数似然函数与交叉熵（cross entropy）损失函数

    1. 二项分布 二项分布也叫 0-1 分布,如随机变量 x 服从二项分布,关于参数 μ(0≤μ≤1),其值取 1 和取 0 的概率如下: {p(x=1|μ)=μp(x=0|μ)=1−μ 则在 x 上的 ...

  2. EOJ 3348 树的顺序存储结构

    前面介绍了树的链式存储结构,那么如何用顺序存储来存储一棵树呢?在顺序存储时,我们除了存储每个结点值外,还要存储树中结点与结点之间的逻辑关系(即双亲与孩子结点之间的关系).下面介绍树的双亲存储法. 编号 ...

  3. Node.js：路由

    ylbtech-Node.js:路由 1.返回顶部 1. Node.js 路由 我们要为路由提供请求的 URL 和其他需要的 GET 及 POST 参数,随后路由需要根据这些数据来执行相应的代码. 因 ...

  4. 如何用SVG写一个环形进度条以及动画

    本次案例主要使用了svg的三个元素,分别为circle.text.path,关于svg的介绍大家可以看MDN上的相关教程,传送门 由于svg可以写到HTML中,所以这里我们就可以很方便的做进度条加载动 ...

  5. DataTable和List相互转换的类

    DataTable与List相互转换 .NET后台数据处理,从数据库中的捞出的数据格式一般是List和DataTable的格式.现在将两种格式相互转换的心得记录下来以便以后查找(直接上代码). pub ...

  6. vuejs开发H5页面总结

    最近参与了APP内嵌H5页面的开发,这次使用vuejs替代了jQuery,仅仅把vuejs当做一个库来使用,效率提高之外代码可读性更强,在此分享一下自己的一些开发中总结的经验. 关于布局方案 当拿到设 ...

  7. c++常用功能封装

    C++文件读写的封装 在C++开发中,文件读写是很常用的功能,出于代码复用的考虑,将它们进行封装. 其中,默认读写的文件是文本文件,并且需要按行处理.调用者只需要关注读取出来的每一行的处理方式.写文件 ...

  8. Oracle PL/SQL开发基础（第三十四弹：RAISE_APPLICATION_ERROR）

    RAISE_APPLICATION_ERROR在子程序内部使用时,能从存储子程序中抛出自定义的错误消息.这样就能将错误报告给应用程序而避免范围未捕获异常. 语法如下: RAISE_APPLICATIO ...

  9. Win10 BackgroundTask

    1.这里面详细的说明了后台任务的搭建 调用等 提示: 1.BackgroundTaskRegistration 里面有这两个事件 OnCompleted/Progress 主要用来UpdateUI 这 ...

  10. 一个openMP编程处理图像的示例

    一个openMP编程处理图像的示例: 从硬盘读入两幅图像,对这两幅图像分别提取特征点,特征点匹配,最后将图像与匹配特征点画出来.理解该例子需要一些图像处理的基本知识,我不在此详细介绍.另外,编译该例需 ...