无障碍开发实践之多级菜单实现-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，无障碍设计是必不可少的一项工作。随着越来越多的人习惯使用屏幕阅读器，多级菜单的实现也需要考虑无障碍方案以保证屏幕阅读器的正常使用。

为什么要考虑屏幕阅读器的使用？

屏幕阅读器是一种辅助技术，是为了让视力障碍人群能够访问 Web 站点而设计的。该设备是一种将 Web 内容转换为语音，文本或 Braille 等其他可理解的形式的软件或硬件。

当我们使用屏幕阅读器时，它可以根据 HTML 元素的语义化结构对 Web 站点进行有声或无声阅读，以达到用户可使用的效果。因此，无论你的站点面向什么人群，都应该考虑无障碍开发，尊重每一个用户的需求。

多级菜单的无障碍实现

多级菜单实现需要围绕着语义化和键盘可访问性展开，因为在使用屏幕阅读器时，很少使用鼠标进行导航。以下是一个示例多级菜单的 HTML 结构：

// javascriptcn.com 代码示例
<nav role="navigation">
  <ul>
    <li>
      <a href="#">第一级菜单 1</a>
      <ul>
        <li><a href="#">第二级菜单 1</a></li>
        <li><a href="#">第二级菜单 2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">第一级菜单 2</a>
      <ul>
        <li><a href="#">第二级菜单 1</a></li>
        <li><a href="#">第二级菜单 2</a></li>
        <li><a href="#">第二级菜单 3</a></li>
      </ul>
    </li>
  </ul>
</nav>

在这个例子中，我们使用<nav>元素来定义导航，<ul>和<li>元素用于定义列表和列表项。在菜单项中，我们将链接包装在<a>元素中。如果菜单项有下级菜单，我们可以使用嵌套的<ul>和<li>元素包含它。

由于这个 HTML 标记语言本身支持无障碍，对于多级菜单的实现，我们需要遵循以下注意事项：

语义化结构

语义化的 HTML 在实现无障碍设计时起着关键作用。使用正确的元素和属性，可以让屏幕阅读器正确地转换为可以理解的内容。例如，使用 <nav> 元素来表示导航栏，使用 role="navigation"属性来进一步指定其用途。

标题与描述

对于较大的 Web 站点，分层式结构和导航菜单可能非常复杂。在这种情况下，代码要求额外的辅助尽可能汇总和记录内容。所以，我们需要提供明确的标题和描述，帮助屏幕阅读器正确识别我们所欲表达的内容。比如，对于每一个二级菜单，我们都需要在<a>元素中创建一个对应的title属性，来帮助用户理解该菜单项的内容。

键盘可访问性

在使用屏幕阅读器时，很少使用鼠标，因此我们需要通过键盘访问菜单项。在多级菜单实现中，常常需要使用箭头或 Tab 键来导航。在菜单中可以通过 js 实现键盘事件，以支持该功能。

修复方案

当屏幕阅读器失效时，多级菜单的访问和导航面临无法使用的情况。在这种情况下，我们可以通过以下方法尝试修复多级菜单的实现：

创建备用菜单

我们可以创建备用菜单，以备屏幕阅读器无法使用时使用。这种方法适用于只需要进行简单导航的站点。对于更复杂的站点，需要更详细的访问方式，因此我们应该根据不同的用户、浏览器和设备类型注册多个备用菜单。

提供文本提示

在无法使用屏幕阅读器的情况下，我们可以为每个菜单项提供一个文本提示。这种方法通常是在无法使用鼠标时使用，可能会有一些不便，但仍然要考虑某些情况下的用户需求。

CSS 动画特效

CSS 动画特效通常可实现用鼠标和键盘导航菜单。这种方法通常适用于需要复杂导航的站点，如商店和购物网站。

示例代码

为演示多级菜单实现的无障碍问题和解决方案，我们为您提供以下示例代码：

// javascriptcn.com 代码示例
<nav>
  <ul id="menu-main-menu" class="menu">
    <li id="menu-item-1" class="menu-item-has-children">
      <a href="#">第一级菜单 1</a>
      <ul class="sub-menu">
        <li><a href="#">第二级菜单 1</a></li>
        <li><a href="#">第二级菜单 2</a></li>
      </ul>
    </li>
    <li id="menu-item-2" class="menu-item-has-children">
      <a href="#">第一级菜单 2</a>
      <ul class="sub-menu">
        <li><a href="#">第二级菜单 1</a></li>
        <li><a href="#">第二级菜单 2</a></li>
        <li><a href="#">第二级菜单 3</a></li>
      </ul>
    </li>
  </ul>
</nav>

<script>
  const menu = document.getElementById("menu-main-menu");
  const menuItems = document.querySelectorAll(".menu-item-has-children > a");
  const subMenus = document.querySelectorAll(".sub-menu");

  // 遍历目录，添加计数器和“aria”属性，以尝试为辅助技术提供更有意义的标识。
  menuItems.forEach(function (menuItem, index) {
    const subMenu = subMenus[index];
    const nextMenuItem = menuItems[index + 1];

    menuItem.setAttribute("aria-haspopup", true);

    if (subMenu) {
      const id = `sub-menu-${index + 1}`;
      menuItem.setAttribute("aria-controls", id);
      subMenu.setAttribute("id", id);
      subMenu.setAttribute("aria-expanded", "false");
      subMenu.setAttribute("tabIndex", -1);
    }
  });

  // 子菜单展开/关闭处理方法
  function toggleSubMenu(event) {
    const menuItem = event.currentTarget;
    const subMenu = menuItem.nextElementSibling;

    if (subMenu) {
      event.preventDefault();

      if (
        subMenu.getAttribute("aria-expanded") === "false" ||
        subMenu.style.display === "none"
      ) {
        subMenu.setAttribute("aria-expanded", "true");
        subMenu.style.display = "block";
      } else {
        subMenu.setAttribute("aria-expanded", "false");
        subMenu.style.display = "none";
      }
    }
  }

  // 遍历子菜单项，初始化子菜单选项的主动事件
  subMenus.forEach(function (subMenu) {
    const subMenuLinks = subMenu.querySelectorAll("a");
    const firstSubMenuLink = subMenuLinks[0];
    const lastSubMenuLink = subMenuLinks[subMenuLinks.length - 1];

    // "Tab" 键切换焦点时展开/关闭子菜单
    firstSubMenuLink.addEventListener("keydown", function (event) {
      if (event.code === "Tab" && !event.shiftKey) {
        event.preventDefault();
        toggleSubMenu(event);
      }
    });

    lastSubMenuLink.addEventListener("keydown", function (event) {
      if (event.code === "Tab" && event.shiftKey) {
        event.preventDefault();
        toggleSubMenu(event);
      }
    });

    // 为子菜单添加鼠标和键盘事件
    subMenuLinks.forEach(function (subMenuLink) {
      subMenuLink.addEventListener("keydown", function (event) {
        if (event.code === "ArrowDown") {
          event.preventDefault();

          if (subMenuLink.nextElementSibling) {
            subMenuLink.nextElementSibling.focus();
          } else {
            firstSubMenuLink.focus();
          }
        }

        if (event.code === "ArrowUp") {
          event.preventDefault();

          if (subMenuLink.previousElementSibling) {
            subMenuLink.previousElementSibling.focus();
          } else {
            lastSubMenuLink.focus();
          }
        }

        if (event.code === "Enter" || event.code === "Space") {
          toggleSubMenu(event);
        }
      });

      subMenuLink.addEventListener("click", toggleSubMenu);
    });
  });
</script>

在该示例代码中，我们首先通过 JavaScript 获取到了 HTML 的相关元素，然后为每个菜单项添加计数器和“aria”属性，其中包括：

aria-haspopup：指示该元素所关联的控件是否具有嵌套的下拉菜单；
aria-controls：指示该元素所关联的控件的 ID；
aria-expanded：指示该元素所关联控件是否已展开，并相应地设置用于相应控件的属性值，如 "true" 或 "false"；
tabIndex：指示元素是否可获取焦点，设置为 -1 表示无法获取。

接下来，我们注册了展开和关闭子菜单事件，基于键盘事件实现了使用 Tab 和方向键来导航菜单的功能，注册了鼠标事件，以选择菜单并展开或关闭下级菜单。

最后，记得在菜单的根元素上添加role=”navigation“属性以表示其导航栏角色。

总结

在本文中，我们讨论了多级菜单实现中的无障碍问题和解决方案。语义化和键盘可访问性是无障碍设计的关键，因此在实现多级菜单时，我们需要遵循这些最佳实践。我们为您提供了示例代码，以帮助您了解如何为无障碍特性编写网站。如果你有任何问题，请在评论区分享你的想法和建议。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64f9d521f6b2d6eab31329ba