原生 JS 实现无障碍焦点管理-FunTeaLearn Online Web Tutorials

原生 JS 实现无障碍焦点管理

在网页制作中，无障碍功能是一项非常重要的设计原则，它可以帮助视力、听力、运动等各类人士更好的使用网站。当然，在前端开发过程中，我们需要考虑到无障碍功能的使用方法，其中焦点管理是不可忽视的一项。

下面将介绍如何用原生 JavaScript 实现无障碍焦点管理，其中包括如何使用键盘导航、如何滚动可见区域以及如何保持焦点在可见区域内。

键盘导航

对于视力差的用户而言，使用鼠标是一项不太友好的操作，因此键盘导航是他们主要的方式。为了实现键盘导航，我们可以使用一个全局变量来记录当前焦点，并设置一个事件监听器来处理键盘事件。

以下代码表示了如何在页面中实现焦点的移动和选择：

// www.javascriptcn.com code example
//记录当前焦点
let currentFocus = 0;

//绑定键盘事件监听器
document.addEventListener("keydown", function(event) {
  //从焦点列表中获取元素数量
  let focusItems = document.querySelectorAll(".focus");
  let maxIndex = focusItems.length - 1;
  
  //通过键盘上的箭头键来控制焦点位置
  switch(event.key) {
    case "ArrowDown":
      if(currentFocus < maxIndex) {
        focusItems[currentFocus].classList.remove("active");
        currentFocus++;
        focusItems[currentFocus].classList.add("active");
        scrollIntoViewIfNeeded(focusItems[currentFocus]);
      }
      break;
    case "ArrowUp":
      if(currentFocus > 0) {
        focusItems[currentFocus].classList.remove("active");
        currentFocus--;
        focusItems[currentFocus].classList.add("active");
        scrollIntoViewIfNeeded(focusItems[currentFocus]);
      }
      break;
  }
});

//将焦点元素滚动到可见区域内
function scrollIntoViewIfNeeded(element) {
  let rect = element.getBoundingClientRect();
  if(rect.bottom > window.innerHeight) {
    element.scrollIntoView(false);
  }
  if(rect.top < 0) {
    element.scrollIntoView(true);
  }
}

滚动可见区域

无论用户是使用鼠标还是键盘导航，都有可能因为元素不在可见区域内而看不到相关内容。因此，我们需要使用 JavaScript 来确保焦点元素在可见区域内。

以下代码表示了如何滚动焦点元素到可见区域：

// www.javascriptcn.com code example
function scrollIntoViewIfNeeded(element) {
  let rect = element.getBoundingClientRect();
  if(rect.bottom > window.innerHeight) {
    element.scrollIntoView(false);
  }
  if(rect.top < 0) {
    element.scrollIntoView(true);
  }
}

保持焦点在可见区域内

有时候，焦点元素可能因为用户的滚动操作而被滚到了不可见的位置，因此我们需要在每次滚动时确保焦点元素在可见区域内。

以下代码表示了如何在窗口滚动时重新让焦点元素进入可见区域：

window.addEventListener("scroll", function() {
  let activeElement = document.activeElement;
  if(activeElement.className.indexOf("focus") > -1) {
    scrollIntoViewIfNeeded(activeElement);
  }
});

以上便是用原生 JavaScript 实现无障碍焦点管理的完整代码。通过使用这些技术，我们可以确保网站可以兼容所有用户，特别是需要无障碍功能的用户。

示例代码

以下代码为示例代码，展示了如何使用以上技术实现无障碍焦点管理。

// www.javascriptcn.com code example
<html>
<head>
  <title>无障碍焦点管理示例</title>
  <style type="text/css">
    .focus { 
      padding: 20px;
      margin: 10px;
      background-color: #ddd; 
    }
    .focus.active { 
      background-color: #f00;
    }
  </style>
  <script type="text/javascript">
    let currentFocus = 0;

    document.addEventListener("keydown", function(event) {
      let focusItems = document.querySelectorAll(".focus");
      let maxIndex = focusItems.length - 1;
      
      switch(event.key) {
        case "ArrowDown":
          if(currentFocus < maxIndex) {
            focusItems[currentFocus].classList.remove("active");
            currentFocus++;
            focusItems[currentFocus].classList.add("active");
            scrollIntoViewIfNeeded(focusItems[currentFocus]);
          }
          break;
        case "ArrowUp":
          if(currentFocus > 0) {
            focusItems[currentFocus].classList.remove("active");
            currentFocus--;
            focusItems[currentFocus].classList.add("active");
            scrollIntoViewIfNeeded(focusItems[currentFocus]);
          }
          break;
      }
    });

    function scrollIntoViewIfNeeded(element) {
      let rect = element.getBoundingClientRect();
      if(rect.bottom > window.innerHeight) {
        element.scrollIntoView(false);
      }
      if(rect.top < 0) {
        element.scrollIntoView(true);
      }
    }

    window.addEventListener("scroll", function() {
      let activeElement = document.activeElement;
      if(activeElement.className.indexOf("focus") > -1) {
        scrollIntoViewIfNeeded(activeElement);
      }
    });
  </script>
</head>
<body>
  <h1>无障碍焦点管理示例</h1>
  <p>使用箭头键来移动焦点。</p>
  <div class="focus active">焦点元素 1</div>
  <div class="focus">焦点元素 2</div>
  <div class="focus">焦点元素 3</div>
  <div class="focus">焦点元素 4</div>
  <div class="focus">焦点元素 5</div>
</body>
</html>

希望本文对大家了解原生 JS 实现无障碍焦点管理有所帮助。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6780c6edce7f48612548b106

原生 JS 实现无障碍焦点管理