如何使用 jQuery 构建无障碍导航栏-JavaScript中文网-JavaScript教程资源分享门户

随着互联网的发展，我们越来越重视无障碍网站的建设，尤其是对于视力、听力等方面存在障碍的用户来说，无障碍网站是他们能够畅通地使用互联网的基础。在前端开发的过程中，很多细节需要我们去关注，包括无障碍性。这篇文章将介绍如何使用 jQuery 构建无障碍导航栏。

无障碍导航栏的重要性

对于许多需要用到屏幕阅读器的人来说，导航栏是他们浏览网站的主要方式。然而，在许多网站上，导航栏并不是那么易于使用，这给这些用户带来了很大的困扰。因此，构建无障碍的导航栏对于让所有用户都能无障碍的使用您的网站来说都非常重要。

使用无障碍属性

通过使用一些无障碍属性可以轻松地让导航栏变得更加易于使用。一些最常用的无障碍属性包括：

aria-labelledy：用于说明导航栏元素的名称或描述
aria-haspopup：用于指示下拉菜单是否可见
aria-expanded：用于指示下拉菜单是否已展开

HTML 结构

下面是一个具有无障碍性的基本导航栏的示例 HTML 结构：

// javascriptcn.com code example
<nav role="navigation">
  <ul class="nav">
    <li><a href="#">Home</a></li>
    <li>
      <a href="#">Dropdown</a>
      <ul class="submenu">
        <li><a href="#">Submenu Item 1</a></li>
        <li><a href="#">Submenu Item 2</a></li>
      </ul>
    </li>
  </ul>
</nav>

在这个示例中，nav 标签用于指示该元素为一个导航栏，而 role="navigation" 属性用于为辅助技术提供更多信息。此外， ul 和 li 标签用于指定菜单项的列表和各个菜单项。

每个链接也都包含了一个 aria-labelledby 属性，该属性用于指定该链接的屏幕阅读器标签。例如，"Home" 链接的 aria-labelledby 属性声明了一个名称为 "home" 的标签区域，这个标签区域的内容是 "Home"。

// javascriptcn.com code example
<nav role="navigation">
  <ul class="nav">
    <li>
      <a href="#" aria-labelledby="home">Home</a>
      <span id="home" class="visually-hidden">Home</span>
    </li>
    <li>
      <a href="#" aria-haspopup="true" aria-expanded="false" aria-controls="submenu" aria-labelledby="dropdown">Dropdown</a>
      <ul class="submenu" id="submenu">
        <li><a href="#">Submenu Item 1</a></li>
        <li><a href="#">Submenu Item 2</a></li>
      </ul>
      <span id="dropdown" class="visually-hidden">Dropdown menu</span>
    </li>
  </ul>
</nav>

在本例中，使用了一个名为 "visually-hidden" 的类来将标签隐藏在页面上，同时让屏幕阅读器可以访问该标签。这是一个通用的样式类，你可以在你的 CSS 文件中定义它：

// javascriptcn.com code example
.visually-hidden {
  position: absolute;
  top: -9999px;
  left: -9999px;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

使用 jQuery

现在，我们来看一下如何构建 jQuery 驱动的无障碍导航栏。我们将使用 jQuery 的 on 和 focus 方法来处理键盘上的"Tab"和"Shift-Tab"事件:

// javascriptcn.com code example
$(document).ready(function() {
  // 鼠标或键盘聚焦时展开下拉菜单
  $('li').on('click keydown', function(e) {
    if (e.type === 'click' 
        || e.keyCode === 13 
        || e.keyCode === 32) {
      $(this).toggleClass('focus');
      $(this).find('ul').toggle();
    }
  });
  
  // 当用户使用 "Tab" 或 "Shift-Tab" 键时，确保焦点顺序是正确的
  $('li a').on('focus', function() {
    $(this).parent().addClass('focus');
  });
  
  $('li a').on('blur', function() {
    $(this).parent().removeClass('focus');
    $(this).parent().find('ul').hide();
  });
});

我们通过监听 click 和 keydown 事件来处理 dropdown 菜单展开的逻辑，同时在用户按下 "Tab" 或 "Shift-Tab" 键时确保导航栏的正确焦点顺序。当用户通过鼠标点击时，将添加 focus 类来达到同样的效果。

另外需要注意的是，在鼠标点击或键盘操控时，我们需要确保正确地将焦点放在下拉菜单上，而在用户按下 "Shift-Tab" 键时则将焦点回到菜单项上。

结论

在本文中，我们介绍了如何使用 jQuery 构建无障碍导航栏，同时探讨了如何使用一些通用的无障碍性属性来提高您的网站的可用性。随着我们的网站受众的增加，无障碍性的建设将变得越来越重要。我们的任务是使网站可以被更多的人所访问和使用，建立一个你的用户可以信任和愿意与其互动的网站。

希望这篇文章对你的前端开发提供了一定的借鉴和帮助。

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