资讯专栏INFORMATION COLUMN

符合ARIA的radiogroup

yeooo / 2689人阅读

摘要:省略,是核心,以下为部分核心代码上面为和添加上为监听器函数这个属性不用初始化,可以在焦点改变时修改

HTML


  
    
    
    
    
    
  
  

    

Drink Options

  • Water
  • Tea
  • Coffee
  • Cola
  • Ginger Ale

省略css,js是核心,以下为部分核心js代码

  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));
    this.el.addEventListener("click", this.handleClick.bind(this));

    // Set ARIA role for the radio group.
    this.el.setAttribute("role", "radiogroup");

    var firstButton = true;
    for (var button of this.buttons) {
      if (firstButton) {
        button.tabIndex = "0";
        firstButton = false;
      } else {
        button.tabIndex = "-1";
      }
    // Set ARIA role for the radio.
      button.setAttribute("role", "radio");
    }
  }

上面为radiogroup和radio添加role

RadioGroup.prototype.handleKeyDown = function(e) {
  switch(e.keyCode) {

    case VK_UP:
    case VK_LEFT: {

      e.preventDefault();

      this.focusedIdx--;
      if (this.focusedIdx < 0)
        this.focusedIdx = this.focusedIdx + this.buttons.length;

      break;
    }

    case VK_DOWN:
    case VK_RIGHT: {

      e.preventDefault();

      this.focusedIdx = (this.focusedIdx + 1) % this.buttons.length;

      break;
    }

  case VK_SPACE:
      var focusedButton = e.target;
      var idx = this.buttons.indexOf(focusedButton);
      if (idx < 0)
        return;
      this.focusedIdx = idx;
      break;

    default:
      return;
  }

  this.changeFocus();
};

RadioGroup.prototype.handleClick = function(e) {
  var button = e.target;
  var idx = this.buttons.indexOf(button);
  if (idx < 0)
    return;
  this.focusedIdx = idx;
  this.changeFocus();
};

上为监听器函数

 RadioGroup.prototype.changeFocus = function() {
   // Set the old button to tabindex -1
   this.focusedButton.tabIndex = -1;
   this.focusedButton.removeAttribute("checked");
   this.focusedButton.setAttribute("aria-checked", "false");

   // Set the new button to tabindex 0 and focus it
   this.focusedButton = this.buttons[this.focusedIdx];
   this.focusedButton.tabIndex = 0;
   this.focusedButton.focus();
   this.focusedButton.setAttribute("checked", "");
   this.focusedButton.setAttribute("aria-checked", "true");
 };

 var group1 = new RadioGroup("#group1");

}());

aria-checked这个属性不用初始化,可以在焦点改变时修改

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/53459.html

相关文章

  • 符合ARIAradiogroup

    摘要:省略,是核心,以下为部分核心代码上面为和添加上为监听器函数这个属性不用初始化,可以在焦点改变时修改 HTML Name: Drink Options Water ...

    Miracle 评论0 收藏0
  • 符合ARIAradiogroup

    摘要:省略,是核心,以下为部分核心代码上面为和添加上为监听器函数这个属性不用初始化,可以在焦点改变时修改 HTML Name: Drink Options Water ...

    zhouzhou 评论0 收藏0
  • FE.BASE-WEB组件包容性设计手册

    摘要:可以简单的认为组件包容性设计可访问性第一组件驱动开发包容性设计是一种设计过程,还有很多的设计过程,没有对错,按需选择。包容性设计力图充分认识用户群体多样性,在设计的过程和结果中减少对用户产生无意识的排除。 前言 包容性设计这个术语并不是一个新概念。这是自2005年以来一直存在的一个短语。它被定义为尽可能多的人可以访问和使用的主流产品/服务的设计,而不需要特殊的适应或专门的设计。 当我们...

    yuanxin 评论0 收藏0
  • 【译】怎么样构建HTML表单

    摘要:当你构建表单时,可以试着听一下屏幕阅读器如何读取它,若听起来很奇怪,那就有必要改进你的表单结构了。该规则必须在表单头部以保证在用户找到必填元素之前,屏幕阅读器等无障碍设备能将其展示或读给用户。 系列文章说明 原文 在建立HTML表单时,最重要的一件事就是如何用正确的方式构建它。而之所以重要,原因有二:一是保证表单能被正确使用、二是这能保证你的表单是无障碍的(可以被能力不同的人使用)...

    hover_lew 评论0 收藏0
  • 【1-100】RadioGroup实现应用主界面

    摘要:代码很简单,如下,高速全览每个都需要实现来控制视图,当不可见的时候,需要隐藏相应的视图,不然会使界面重叠在一起。 首先,我们先来创建主界面的布局文件 .......省略 可以看到,我们将最后一个先设置为选中状态,在Acti...

    CntChen 评论0 收藏0

发表评论

0条评论

yeooo

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<