随着 Web 技术的不断发展，我们可以随时随地使用计算机、手机、平板电脑等设备浏览互联网，这里面有很多有趣和有用的内容等待我们去发现。然而面对一些身体上有障碍的用户，使用鼠标或其他指针装置可能存在不便或无法操作的情况，这就需要我们尽可能让我们的网站无障碍，并提供键盘导航功能。因为键盘导航是大多数无障碍用户主要被使用的功能之一，本篇文章将为您介绍如何优化无障碍键盘导航，使您的网站变得更加友好和易用。
为什么需要无障碍键盘导航？
无障碍键盘导航是指用户使用键盘（而不是鼠标）进行网站导航的功能，在开发网站时为它做好优化，对于那些无法使用鼠标的用户至关重要。无障碍键盘导航的好处是使得用户可以通过键盘在网站上移动，并使用 Enter 键打开链接以及访问交互元素。
在现代 Web 应用程序的开发中，使用键盘导航功能也是一种很基本的操作需求。因为一些用户可能是身体上有障碍，这时候鼠标的的使用就很困难，这就需要更加友好、更加有用的键盘导航功能，以便无障碍用户能够更加顺畅的使用您的网站。因此，无障碍键盘导航功能能够让您的网站更加易用，提高用户的满意度以及增加访问率。
使用无障碍键盘导航的最佳实践
接下来，我们将从几个方面介绍如何实现无障碍键盘导航。
确定键盘 Tab 的顺序
在键盘导航中，第一步是了解您的网站元素在键盘 Tab 顺序中的位置。为了达到这个目标，我们可以添加一个明确的 tabindex 属性，从 1 开始递增。这个属性可用于显式为特定元素定义导航顺序，并可以结合 CSS 元素选择器一起使用。例如，设置 tabindex="1" 的元素将首先被正确“标记”，而 tabindex="2" 的元素将是下一个被访问的元素，依此类推。
另外，您还可以通过 CSS 选择器使用伪类:focus 属性添加样式，指示当前元素是获得焦点的，以便让无障碍用户准确找到当前定位的元素。
Example:
------
------
-------
--------
------------
------------ -
------- --- ------ -----
-
--------
-------
------
-- -------- ----------------- -----
-- -------- ----------------- -----
------ ----------- ------------ --
------ ------------- ------------ -------------- --
-------
-------在上面的代码中，展示了四个元素：两个链接、一个输入框和一个按钮，在它们上面添加了 tabindex 属性，以便在键盘导航中使用。然后我们使用 CSS 样式来指示当前元素是获得焦点的。
使用 Accesskey
Accesskey 是一种可以简化操作，并使无障碍用户更容易访问页面中某些元素的亿个属性。对于一些常用的功能按钮，如跳到搜索框、跳到页面导航等，我们可以使用 Accesskey，让用户更轻松快捷地使用键盘快捷键访问这些常用的操作。
当我们标记 Accesskey 的元素时，可以使用不同操作系统或浏览器提供的快捷键或组合键来访问这些元素。使用 Accesskey 不仅可以帮助无障碍用户使用网站，而且也可以为经常使用键盘导航的用户节省时间和精力。
Example:
-- -------- ------------------------
上面这个例子定义了一个快捷键为1的a标签，以便用户通过快捷键进入搜索框。
显示键盘可用性状态
重点强调键盘导航的现实情况是许多键盘导航用户可能无法明显地区分那些有键盘支持的元素和那些不支持有支持。为此，开发人员应为页面元素添加包含键盘支持信息的标注。常用的例子包括“按 Tab 导航”、“按 Enter 打开链接”等元素，可以清晰明确地提示无障碍用户在使用键盘导航时可以做什么。这些辅助信息应该以明显的形式被呈现，以确保用户的易用性和可访问性。
Example:
---- ------------- ----------------------
----- ----- --------
----- ----- ----------
------在上面的例子中，使用了 role="status" 和 aria-live="assertive" 属性，表明这里是一个信息区域。并在里面加入了明显的提示句，以指导无障碍用户在使用键盘导航时的操作。
总结
无障碍键盘导航是重要的功能之一，需要我们注意一些最佳实践，从用户的角度出发，让他们使用网站时更加友好和易用。如果您站在使用者的角度了解这些元素的原理和实现方法，相信可以让您的网站更加易用和具有更强的互动性。以无障碍的键盘导航为例，这不仅可以给那些无法使用鼠标等指针装置的用户带来便利，而且也可以铺就更好的用户体验之路，为您的网站带来更多的流量和忠实的访问者。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64b0cd9748841e9894cfb31e