随着无障碍网站的需求日益增加，键盘导航已经成为了一个必要的功能。对于一些身体残障的用户，键盘导航可以让他们更加方便的浏览网站。本文将介绍如何使网站的键盘导航变得更加无障碍。
1. 使用 tabindex 属性
tabindex 属性可以控制元素在键盘导航中的顺序。默认情况下，浏览器会按照 HTML 文档中元素的排列顺序来确定键盘导航的顺序。但是，有时候我们需要调整元素的顺序，这时候就可以使用 tabindex 属性来控制。
tabindex 的值可以是正整数、0 和负整数。正整数表示元素在键盘导航中的顺序，数值越小越先被访问。0 表示元素在键盘导航中的顺序与文档流中的顺序一致。负整数表示元素不能通过键盘导航访问，但可以通过 JavaScript 等其他方式访问。
以下是一个示例代码：
<button tabindex="1">按钮1</button> <button tabindex="2">按钮2</button> <button tabindex="3">按钮3</button> <button tabindex="0">按钮4</button> <button tabindex="-1">按钮5</button>
在上面的代码中，按钮的 tabindex 属性分别为 1、2、3、0 和 -1。通过这种方式，我们可以控制按钮在键盘导航中的顺序。
2. 使用键盘事件
除了 tabindex 属性之外，我们还可以使用键盘事件来控制键盘导航。常用的键盘事件有 keydown、keyup 和 keypress。
在使用键盘事件的时候，我们需要注意以下几点：
- 确定默认焦点：在页面加载完成后，需要将焦点设置到默认的元素上，这样用户可以通过键盘导航来操作网站。
- 确定键盘操作方式：需要确定用户按下哪些键来进行导航，例如 Tab、Enter、方向键等。
- 确定焦点的变化：需要确定焦点在不同操作下的变化，例如在按下 Tab 键时，焦点应该移动到哪个元素上。
以下是一个示例代码：
-- -------------------- ---- -------
-----
------- -------------------------
------- -------------------------
------- -------------------------
------
--------
----- ------- - ------------------------------------
----- ----------- - -----------
----- ---------- - ---------------------- - ---
--------------------
-------- -------------------- -
-- ---------- --- ------ -
-- ---------------- -
-- ----------------------- --- ------------ -
-----------------------
-------------------
-
- ---- -
-- ----------------------- --- ----------- -
-----------------------
--------------------
-
-
-
-
------------------------------------ ---------------
---------在上面的代码中，我们通过 JavaScript 来控制键盘导航。首先，我们将焦点设置到第一个按钮上，然后监听键盘事件。当用户按下 Tab 键时，如果焦点在第一个按钮上并且按下了 Shift 键，那么我们将焦点移动到最后一个按钮上；如果焦点在最后一个按钮上并且没有按下 Shift 键，那么我们将焦点移动到第一个按钮上。
3. 使用 ARIA 属性
ARIA（Accessible Rich Internet Applications）是一种用来描述 Web 内容、应用程序和用户界面的语言。通过使用 ARIA 属性，我们可以为一些不具备语义的元素增加语义信息，从而使其更加无障碍。
ARIA 属性包括 role、aria-label、aria-labelledby 等。其中，role 属性用来指定元素的角色，例如 button、link、menu 等；aria-label 和 aria-labelledby 属性用来指定元素的文本内容。
以下是一个示例代码：
<div role="navigation" aria-label="主导航"> <a href="/">首页</a> <a href="/about">关于我们</a> <a href="/contact">联系我们</a> </div>
在上面的代码中，我们为导航栏添加了 role 和 aria-label 属性，从而使其具备了导航栏的语义信息。
结语
通过使用 tabindex 属性、键盘事件和 ARIA 属性，我们可以使网站的键盘导航变得更加无障碍。这不仅可以提高网站的可访问性，也可以为身体残障的用户提供更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d9518ea941bf71340e7737
