摘要:省略,是核心,以下為部分核心代碼上面為和添加上為監聽器函數這個屬性不用初始化,可以在焦點改變時修改
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這個屬性不用初始化,可以在焦點改變時修改
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/53459.html
摘要:省略,是核心,以下為部分核心代碼上面為和添加上為監聽器函數這個屬性不用初始化,可以在焦點改變時修改 HTML Name: Drink Options Water ...
摘要:省略,是核心,以下為部分核心代碼上面為和添加上為監聽器函數這個屬性不用初始化,可以在焦點改變時修改 HTML Name: Drink Options Water ...
摘要:當你構建表單時,可以試著聽一下屏幕閱讀器如何讀取它,若聽起來很奇怪,那就有必要改進你的表單結構了。該規則必須在表單頭部以保證在用戶找到必填元素之前,屏幕閱讀器等無障礙設備能將其展示或讀給用戶。 系列文章說明 原文 在建立HTML表單時,最重要的一件事就是如何用正確的方式構建它。而之所以重要,原因有二:一是保證表單能被正確使用、二是這能保證你的表單是無障礙的(可以被能力不同的人使用)...
閱讀 1456·2021-09-02 13:57
閱讀 1870·2019-08-30 15:55
閱讀 2407·2019-08-30 15:54
閱讀 2241·2019-08-30 15:44
閱讀 2733·2019-08-30 13:18
閱讀 480·2019-08-30 13:02
閱讀 627·2019-08-29 18:46
閱讀 1665·2019-08-29 11:25