键盘导航是网页无障碍性中一个常常被忽略的问题。对于无法使用鼠标操作网页的用户来说，键盘导航会成为访问网页的主要方式。因此，为了使网页达到无障碍性标准，我们需要关注键盘导航的实现。本篇文章将介绍键盘导航实现无障碍性标准问题，以及WAI-ARIA的解决方案，并且提供示例代码进行指导和学习。
键盘导航实现无障碍性标准问题
对于无法使用鼠标操作网页的用户来说，键盘导航是访问网页的主要方式之一。因此，我们需要确保键盘导航在网页上稳定可用。针对键盘导航在网页上的应用，无障碍阻碍主要包括以下问题：
- 焦点的状态不清晰。键盘导航的用户需要清楚的知道当前焦点所在的位置。
- 焦点顺序混乱。键盘导航的用户需要按照合理的顺序遍历焦点。
- 编程错误。键盘导航的用户需要按照预期的方式与焦点交互。
这些问题可以通过遵循以下建议予以解决：
- 安排好元素的 Tab 键顺序。通过按下 Tab 键可以遍历到所有可聚焦的元素。优先考虑的顺序是从上至下、从左至右的自然流顺序。
- 提供良好的焦点状态反馈。为焦点添加合理的状态反馈以使得键盘导航的用户清晰的了解当前焦点所在的位置。
- 提供统一的焦点展现方式。焦点样式应该在所有元素上是统一的。这有助于用户快速识别当前聚焦的位置。
- 预防焦点捕获陷阱。键盘导航的用户不希望焦点捕获次要元素从而无法完成所需要的交互。焦点的捕获应该是可控的。
WAI-ARIA的解决方案
WAI-ARIA（Web Accessibility Initiative - Accessible Rich Internet Applications）为开发者提供了一种声明式的方法，以实时地通知用户当前焦点在哪里以及如何与其他元素进行交互。WAI-ARIA不仅支持键盘导航用户的需求，同时也提供了其他无障碍用户所需的功能支持。
下面介绍几个在键盘导航中常用的 WAI-ARIA 属性：
- aria-haspopup 和 aria-expanded：指示菜单元素是否展现，并为使用键盘导航的用户提供了明确的菜单状态反馈。
- aria-selected：指示元素是否被选中。对于包含自选元素（也即是单选或多选控件）的页面，它可以为键盘导航的用户提供选中状态的反馈。
- aria-current：为当前展示的元素提供状态反馈。
以下为示例代码，演示如何使用 WAI-ARIA 来实现一个简单的菜单：
-- -------------------- ---- -------
--- ---------------
--- --------------- ---------------------
-- ----------------
--- ----------- -------------------
--- ------------------ -----------------------
--- ------------------ -----------------------
--- ------------------ -----------------------
-----
-----
--- ------------------ ---------------------
--- ------------------ ---------------------
-----需要注意以下几点：
- 给菜单元素添加 role 属性告诉屏幕阅读器，该元素代表着菜单。
- 通过 aria-haspopup 属性告诉用户这个菜单有下拉菜单的选项。
- 通过设置隐蔽状态的 aria-hidden 属性控制是否显示下拉菜单。
该示例代码为实现演示，有兴趣读者可根据需求进行相应的探究和调整。
总结
本篇技术文章详细介绍了键盘导航在无障碍性标准中的问题，并详细介绍了WAI-ARIA解决方案，同时提供了简单的示例代码进行指导和学习。实施键盘导航对提高网页无障碍性标准至关重要，切记要考虑用户需求并合理应用 WAI-ARIA 协议。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ea530af6b2d6eab35521a7