随着移动设备的普及和人们对访问互联网的需求不断增长，无障碍性（accessibility）这个话题已经成为了大家关注的焦点。在 Web 开发中，我们应该尽可能地让我们的网站或应用程序能够被更多的人所访问，包括一些使用辅助技术的用户。
键盘目标（keyboard target）作为 Web 界面设计的一个重要方面，指的是可以通过键盘操作选择和激活的元素。但是, 为了实现无障碍性, 我们需要考虑到的不只是键盘可操作, 也需要考虑到是让键盘可视。
让键盘目标可操作
一个良好的键盘目标应该是能够通过键盘方向键（up, down, left, right）和 Tab 键进行选择和激活。为此，我们可以通过以下步骤来实现：
- 确保我们的网站程序中没有隐藏或不可见的键盘目标。
- 通过 CSS 为键盘目标增加可视效果，比如用背景色或边框来显示键盘目标的位置。
- 应该让屏幕阅读器能够访问这些键盘目标，并告知当前处于焦点的元素。
- 所有的键盘目标都应该有 hover 和 focus 时的状态。
让键盘目标可视
为了让键盘目标真正有用，我们需要让它们在使用键盘时能够可视。
以下是实现让键盘目标可视的一些技巧：
- 在 CSS 中应用:focus-visible 伪类来突出显示键盘聚焦元素，而不仅仅是使用:focus 伪类。
:focus-visible { outline: 2px solid #333; }
- 为键盘方式增加可视化扫描聚焦效果，也就是所谓的“键盘扫描”， 键盘扫描是一种基于时间的突出显示可能被按下的键盘目标的一种技术，从而提高了键盘使用的体验
-- -------------------- ---- ------- -- --- -- -------------- - -------- ----- - -------------------- - ----------- - - ------- -------- ----- - --------- - --------- ------ ---- -- ------- -- ------ ----- -------- -- - -- ---------- -- -------- ----------------- - -- ---------- --- -- - --------------------------------------------- ------------------------------------- ---------------- - - ---------------------------------- ---------------- ------------------------------------ ------- -- - -- -------------------------------------------------- - --------------------------------------------- - --- ------------------------------------- ------- -- - ------------------------------------------------ ---展开代码
这里我们使用了两种方法实现可视化的键盘目标：
- 通过 JS 监听 body 中第一个 Tab 焦点事件，并设置 focus-visible 类。之后聚焦时，根据是否有 focus-visible 类来设置聚焦时样式。
- 通过自定义样式来实现一个透明的 tab-trap，让 Tab 键焦点永远不会离开视线范围。这样当聚焦在其中的元素上时，我们就可以通过 CSS 给其增加样式来实现键盘扫描效果。
示例代码
为了更好地理解上面提到的内容，我们来看一个实际的示例：
-- -------------------- ---- ------- ---- ------------ -------------- ---------------- ------ -- -------- ------------------------ -- -------- ------------------------- -- -------- --------------------------- ------ -------- ----- ---- - -------------------------------- ----- --------- - ----------------------------------------------- --- ----- - -- ------------------------ -- -- - -------------------------------- ------- -- - -- -------------- --- -- -- ------------- --- --- - -- ----- ----- ----- - - - -- -- ------ -- ----------------- - ----- - -- - ------------------------- - ---- -- -------------- --- -- -- ------------- --- --- - -- --- ---- ----- - - - -- -- ------ - -- - ----- - ---------------- - -- - ------------------------- - --- --- ---------展开代码
在这个例子中，我们创建一个菜单，其中包含了3个键盘目标元素（用标记表示），它们的角色是 menuitem，意味着它们是一个菜单的选项。
我们使用角色和aria-label属性告知屏幕阅读器这些标签是一个菜单，以帮助它们更好的理解页面的结构。
对于键盘操作，我们使用了keydown事件来处理用户按下的键的事件，并根据方向键的不同调用focus()方法，将聚焦移至下一个或上一个菜单项。同时，我们将该事件通过index变量保存，以便我们可以跟踪用户所处的位置，以及进行下一步的操作。
通过以上方式，我们就可以让我们的键盘目标可视且可操作了。
结语
在 web 开发中，尽管键盘操作不是每个人的首选操作方式，但考虑到一些用户的需求，我们仍需为这部分人群提供一种可用的、体验优秀的操作方式，特别是对于一些需要使用辅助技术的用户。本文介绍了我们应该如何实现无障碍性-键盘目标以及提高键盘目标的可视化效果，同时包含了一些示例代码以及一些应该注意的关键点。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c7b76ecc0f7239cdf96d15
