原生 JS 实现无障碍焦点管理
在网页制作中，无障碍功能是一项非常重要的设计原则，它可以帮助视力、听力、运动等各类人士更好的使用网站。当然，在前端开发过程中，我们需要考虑到无障碍功能的使用方法，其中焦点管理是不可忽视的一项。
下面将介绍如何用原生 JavaScript 实现无障碍焦点管理，其中包括如何使用键盘导航、如何滚动可见区域以及如何保持焦点在可见区域内。
键盘导航
对于视力差的用户而言，使用鼠标是一项不太友好的操作，因此键盘导航是他们主要的方式。为了实现键盘导航，我们可以使用一个全局变量来记录当前焦点，并设置一个事件监听器来处理键盘事件。
以下代码表示了如何在页面中实现焦点的移动和选择：
-- -------------------- ---- -------
--------
--- ------------ - --
-----------
------------------------------------ --------------- -
--------------
--- ---------- - ------------------------------------
--- -------- - ----------------- - --
------------------
----------------- -
---- ------------
--------------- - --------- -
----------------------------------------------------
---------------
-------------------------------------------------
-------------------------------------------------
-
------
---- ----------
--------------- - -- -
----------------------------------------------------
---------------
-------------------------------------------------
-------------------------------------------------
-
------
-
---
---------------
-------- ------------------------------- -
--- ---- - --------------------------------
-------------- - ------------------- -
------------------------------
-
----------- - -- -
-----------------------------
-
-滚动可见区域
无论用户是使用鼠标还是键盘导航，都有可能因为元素不在可见区域内而看不到相关内容。因此，我们需要使用 JavaScript 来确保焦点元素在可见区域内。
以下代码表示了如何滚动焦点元素到可见区域：
-- -------------------- ---- -------
-------- ------------------------------- -
--- ---- - --------------------------------
-------------- - ------------------- -
------------------------------
-
----------- - -- -
-----------------------------
-
-保持焦点在可见区域内
有时候，焦点元素可能因为用户的滚动操作而被滚到了不可见的位置，因此我们需要在每次滚动时确保焦点元素在可见区域内。
以下代码表示了如何在窗口滚动时重新让焦点元素进入可见区域：
window.addEventListener("scroll", function() {
let activeElement = document.activeElement;
if(activeElement.className.indexOf("focus") > -1) {
scrollIntoViewIfNeeded(activeElement);
}
});以上便是用原生 JavaScript 实现无障碍焦点管理的完整代码。通过使用这些技术，我们可以确保网站可以兼容所有用户，特别是需要无障碍功能的用户。
示例代码
以下代码为示例代码，展示了如何使用以上技术实现无障碍焦点管理。
-- -------------------- ---- -------
------
------
------------------------
------ ----------------
------ -
-------- -----
------- -----
----------------- -----
-
------------- -
----------------- -----
-
--------
------- -----------------------
--- ------------ - --
------------------------------------ --------------- -
--- ---------- - ------------------------------------
--- -------- - ----------------- - --
----------------- -
---- ------------
--------------- - --------- -
----------------------------------------------------
---------------
-------------------------------------------------
-------------------------------------------------
-
------
---- ----------
--------------- - -- -
----------------------------------------------------
---------------
-------------------------------------------------
-------------------------------------------------
-
------
-
---
-------- ------------------------------- -
--- ---- - --------------------------------
-------------- - ------------------- -
------------------------------
-
----------- - -- -
-----------------------------
-
-
--------------------------------- ---------- -
--- ------------- - -----------------------
------------------------------------------- - --- -
--------------------------------------
-
---
---------
-------
------
------------------
------------------
---- ------------ ------------ -------
---- ------------------ -------
---- ------------------ -------
---- ------------------ -------
---- ------------------ -------
-------
-------希望本文对大家了解原生 JS 实现无障碍焦点管理有所帮助。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6780c6edce7f48612548b106