摘要:省略,是核心,以下为部分核心代码上面为和添加上为监听器函数这个属性不用初始化,可以在焦点改变时修改
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/117120.html
摘要:省略,是核心,以下为部分核心代码上面为和添加上为监听器函数这个属性不用初始化,可以在焦点改变时修改 HTML Name: Drink Options Water ...
摘要:省略,是核心,以下为部分核心代码上面为和添加上为监听器函数这个属性不用初始化,可以在焦点改变时修改 HTML Name: Drink Options Water ...
摘要:当你构建表单时,可以试着听一下屏幕阅读器如何读取它,若听起来很奇怪,那就有必要改进你的表单结构了。该规则必须在表单头部以保证在用户找到必填元素之前,屏幕阅读器等无障碍设备能将其展示或读给用户。 系列文章说明 原文 在建立HTML表单时,最重要的一件事就是如何用正确的方式构建它。而之所以重要,原因有二:一是保证表单能被正确使用、二是这能保证你的表单是无障碍的(可以被能力不同的人使用)...
阅读 2921·2021-11-24 09:39
阅读 3597·2021-11-22 13:54
阅读 3408·2021-11-16 11:45
阅读 2431·2021-09-09 09:33
阅读 3193·2019-08-30 15:55
阅读 1289·2019-08-29 15:40
阅读 919·2019-08-29 15:19
阅读 3395·2019-08-29 15:14