摘要:省略,是核心,以下为部分核心代码上面为和添加上为监听器函数这个属性不用初始化,可以在焦点改变时修改
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
摘要:省略,是核心,以下为部分核心代码上面为和添加上为监听器函数这个属性不用初始化,可以在焦点改变时修改 HTML Name: Drink Options Water ...
摘要:省略,是核心,以下为部分核心代码上面为和添加上为监听器函数这个属性不用初始化,可以在焦点改变时修改 HTML Name: Drink Options Water ...
摘要:可以简单的认为组件包容性设计可访问性第一组件驱动开发包容性设计是一种设计过程,还有很多的设计过程,没有对错,按需选择。包容性设计力图充分认识用户群体多样性,在设计的过程和结果中减少对用户产生无意识的排除。 前言 包容性设计这个术语并不是一个新概念。这是自2005年以来一直存在的一个短语。它被定义为尽可能多的人可以访问和使用的主流产品/服务的设计,而不需要特殊的适应或专门的设计。 当我们...
摘要:当你构建表单时,可以试着听一下屏幕阅读器如何读取它,若听起来很奇怪,那就有必要改进你的表单结构了。该规则必须在表单头部以保证在用户找到必填元素之前,屏幕阅读器等无障碍设备能将其展示或读给用户。 系列文章说明 原文 在建立HTML表单时,最重要的一件事就是如何用正确的方式构建它。而之所以重要,原因有二:一是保证表单能被正确使用、二是这能保证你的表单是无障碍的(可以被能力不同的人使用)...
摘要:代码很简单,如下,高速全览每个都需要实现来控制视图,当不可见的时候,需要隐藏相应的视图,不然会使界面重叠在一起。 首先,我们先来创建主界面的布局文件 .......省略 可以看到,我们将最后一个先设置为选中状态,在Acti...
阅读 3552·2021-11-16 11:39
阅读 1231·2021-09-02 13:57
阅读 1627·2019-08-30 15:55
阅读 2094·2019-08-30 15:54
阅读 1994·2019-08-30 15:44
阅读 2545·2019-08-30 13:18
阅读 293·2019-08-30 13:02
阅读 397·2019-08-29 18:46