在前端开发中，如何确保我们的页面能够被所有用户所访问和使用？这就需要考虑到无障碍性（Accessibility）。而在无障碍性中，鼠标焦点（Focus）的管理显得尤为重要。
本文将介绍一个 npm 包 eng-a11y-focus-scope，它能够帮助我们更好地管理焦点，提升页面的无障碍访问性。
eng-a11y-focus-scope 简介
eng-a11y-focus-scope 是一个小型的 JavaScript 库，它提供了管理焦点的 API，可以帮助开发者在页面上按需创建焦点区域（Focus Scope），则可以使得用户不必遍历整个页面去找到需要的元素，这对于键盘使用者非常友好，也符合了 Web Content Accessibility Guidelines 的要求。
使用 eng-a11y-focus-scope
在使用 eng-a11y-focus-scope 之前，需要先在项目中安装该 package。
--- ------- --------------------
安装完成后，就可以通过 import 的方式导入 eng-a11y-focus-scope。
------ ----------------- ---- -----------------------
接着，即可使用 EngA11yFocusScope 提供的 API 开始使用焦点管理。
创建 Focus Scope
首先，我们需要使用 FocusScope 类来创建一个新的焦点管理范围。
----- -------------- - --- ---------------------------------------------------
以上代码创建了一个名为 mainFocusScope 的焦点区域，以 document.getElementById("main") 为父节点建立焦点区域。
焦点管理
一旦有了焦点管理范围，就可以将其作为参数传入 EngA11yFocusScope 提供的 API 中进行焦点的管理了。
获取当前焦点
----- ------------------- - ------------------------------------------
通过 getCurrentFocusedElement 方法获取当前焦点所在的元素。
获取可以被聚焦的元素
----- -------------------- - --------------------------------------
通过 getFocusableElements 方法获取焦点管理范围内所有可以被聚焦的元素列表。
焦点聚集到范围内的第一个元素
-----------------------------------
通过 focusFirstElement 方法聚集到焦点管理范围内的第一个元素。
焦点聚集到范围内最后一个元素
----------------------------------
通过 focusLastElement 方法聚集到焦点管理范围内的最后一个元素。
焦点聚集到指定的元素
-----------------------------------------------------------------------
通过 setFocusToElement 方法聚集到指定的元素，该元素必须在焦点管理范围内，否则会抛出错误。
eng-a11y-focus-scope 实战
下面通过一个示例给大家演示如何使用 eng-a11y-focus-scope：
------
------------------------ -------
---- ----------
-----
------ ------
-- ----------------- - -------
------
-----
------ ------
-- ----------------- - -------
------
-----
------ ------
-- ----------------- - -------
------
------
------- ---------------------------
------- ----------------------------
------- --------------------------
------- ------------- --------------------------
-------在该示例中，我们将 eng-a11y-focus-scope 应用于页面中的三个段落上，同时提供了三个按钮，分别用于聚焦到段落中的第一个元素、最后一个元素、和指定的元素。
------ ----------------- ---- ----------------------- ----- -------------- - --- --------------------------------------------------- --------------------------------------------------------- -- -- - ----------------------------------- --- --------------------------------------------------------- -- -- - ---------------------------------- --- --------------------------------------------------------- -- -- - ----------------------------------------------------------------------- ---
以上代码就是完整的 eng-a11y-focus-scope 应用实例，你可以通过点击按钮来进行相关操作，从而对 eng-a11y-focus-scope 的使用有更深入的认识。
总结
通过阅读本文，我们了解了什么是 eng-a11y-focus-scope，以及如何使用它来提升页面的无障碍访问性。同时本文也提供了一个完整的实例供大家参考，希望本文对于初学者和大家有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055b8e81e8991b448d9358