键盘焦点支持是指在无障碍 Web 应用程序中，用户可以使用键盘来导航和操作页面元素。这对于身体残疾人士、老年人等使用鼠标不方便的用户来说非常重要。本文将介绍如何为无障碍 Web 应用程序添加键盘焦点支持，帮助更多用户获得更好的用户体验。
键盘焦点是什么？
在 Web 应用程序中，焦点是指用户当前正在与之交互的元素。当用户在页面上点击或使用 Tab 键时，焦点会从一个元素移动到另一个元素。这种移动焦点的行为可以被称为键盘焦点。键盘焦点支持是指用户可以使用键盘控制焦点的移动。
添加键盘焦点支持的方法
下面是添加键盘焦点支持的一些常见方法：
1. 添加 tabindex 属性
tabindex 属性为元素定义了可以被焦点访问的顺序。它的值可以是数字，用于控制焦点的访问顺序。如果一个元素的 tabindex 值为1，则在页面加载时该元素会成为焦点。如果 tabindex 的值为-1，意味着元素不能被键盘访问到，但是它可以使用 JavaScript 获得焦点。
<button tabindex="1">Click me!</button>
2. 键盘事件监听
通过监听键盘事件，我们可以在键盘上按下某个键时触发 JavaScript 代码。最常用的键盘事件是keydown, keyup 和 keypress。我们可以在事件监听器中执行自己的代码来实现焦点的移动。
-- -------------------- ---- -------
------------------------------------ --------------- -
----- ------------- - -----------------------
--- ------------
------ ----------- -
---- ----------
----------- - -------------------------------------
------
---- ------------
----------- - ---------------------------------
------
---- ------------
----------- - ---------------------------------------------------------------------------
------
---- -------------
----------- - -----------------------------------------------------------------------
------
-
-- ------------- -
--------------------
-
---3. 使用 ARIA
ARIA（Accessible Rich Internet Applications）是一组可以帮助开发无障碍 Web 应用程序的属性和角色。通过使用 ARIA，我们可以为用户提供更多关于 Web 应用程序中元素状态和操作的信息。
例如，对于一个下拉菜单，我们可以使用 aria-haspopup 属性告诉用户该下拉菜单会显示一个子菜单。
<button aria-haspopup="true">Dropdown Menu</button>
4. 使用 CSS :focus 伪类
:focus 伪类用于选中当前有焦点的元素。我们可以通过设置 :focus 伪类的样式来改变有焦点元素的外观。这个方法可以提高程序的可访问性，并帮助用户更好地识别当前元素的状态。
:focus {
outline: 2px solid blue;
}示例代码
下面是一个添加键盘焦点支持的示例代码：
-- -------------------- ---- -------
---- ---------------------------
--- --------------------- ------
------- ------------------- ----------
------- ------------------- ----------
---- ------------
------- ------------ ----------------------------- -------------
---- ---------------------- -------
---- ---------------------- -------
------
-------- -------------------- ---- -------
------------------------------------ --------------- -
----- ------------- - -----------------------
--- ------------
------ ----------- -
---- ----------
----------- - -------------------------------------
------
---- ------------
----------- - ---------------------------------
------
---- ------------
----------- - ---------------------------------------------------------------------------
------
---- -------------
----------- - -----------------------------------------------------------------------
------
-
-- ------------- -
--------------------
-
---:focus {
outline: 2px solid blue;
}结论
通过为 Web 应用程序添加键盘焦点支持，我们可以帮助更多用户获得更好的用户体验，使我们的 Web 应用程序更加无障碍。我们可以使用 tabindex 属性、键盘事件监听、ARIA 和 CSS :focus 伪类等方法来实现焦点的移动支持。通过不断学习和实践，我们可以更好地提高我们的 Web 应用程序的可访问性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670cd5675f551281025bce62