无障碍折叠菜单：如何实现基础和高级的 ARIA-JavaScript中文网-JavaScript教程资源分享门户

当我们在开发网站或者 Web 应用程序的时候，考虑到无障碍性对于所有人来说都是至关重要的。对于那些视力或听力有缺陷的访问者来说，一个友好的 UI 界面是十分必要的。折叠菜单是一种常见的页面元素，如何让无障碍访问支持折叠菜单呢？这篇文章将详细介绍如何实现无障碍折叠菜单，从基础的 ARIA 属性，到高级的 ARIA 应用，为视力或听力有障碍的访问者提供更好的用户体验。

理解 ARIA

在开始之前，我们需要先了解什么是 ARIA。ARIA(Accessible Rich Internet Applications)，即无障碍互联网应用程序，它为 Web 应用程序提供了一系列属性和语义角色，以帮助开发者创建更好的无障碍应用。简单来说，ARIA 使得那些无法使用鼠标进行操作的访问者，可以通过键盘或其他输入设备实现同等的功能。

ARIA 属性分为三个类别：状态属性（State），保证属性（Property）和角色属性（Role）。在本文中，我们将使用角色属性和状态属性来添加折叠菜单的无障碍性。

基础 ARIA：使用 role 属性

首先，我们需要为折叠菜单添加一个角色（Role），这样屏幕阅读器就可以知道该元素的用途是折叠菜单。我们可以使用 role="menuitem" 属性来定义菜单项，使用 role="menu" 属性来定义菜单容器。我们还可以使用 aria-expanded 属性来指示菜单项是否已经展开或关闭。

下面是一个基本的无障碍折叠菜单的实现：

// javascriptcn.com 代码示例
<div role="menu">
  <div role="menuitem" aria-expanded="false">
    <a href="#" aria-label="Toggle menu item 1">Menu item 1</a>
    <ul>
      <li><a href="#">Submenu item 1</a></li>
      <li><a href="#">Submenu item 2</a></li>
      <li><a href="#">Submenu item 3</a></li>
    </ul>
  </div>
  <div role="menuitem" aria-expanded="false">
    <a href="#" aria-label="Toggle menu item 2">Menu item 2</a>
    <ul>
      <li><a href="#">Submenu item 1</a></li>
      <li><a href="#">Submenu item 2</a></li>
      <li><a href="#">Submenu item 3</a></li>
    </ul>
  </div>
  <div role="menuitem" aria-expanded="false">
    <a href="#" aria-label="Toggle menu item 3">Menu item 3</a>
    <ul>
      <li><a href="#">Submenu item 1</a></li>
      <li><a href="#">Submenu item 2</a></li>
      <li><a href="#">Submenu item 3</a></li>
    </ul>
  </div>
</div>

在这个例子中，我们使用了 role="menu" 来定义菜单容器，使用 role="menuitem" 来定义菜单项，使用 aria-expanded="false" 来指示菜单项是关闭状态。为了让屏幕阅读器更好地表述“展开”或“关闭”，我们可以使用 aria-label 属性来定义菜单项的标签。

高级 ARIA：使用 aria-controls 和 tabindex 属性

上面的代码是最基本的实现方式，现在我们来看一下高级的 ARIA 技术。我们可以使用 aria-controls 属性来将菜单项与其子菜单关联起来。当菜单项获得焦点时，通过使用 tabindex 属性，我们可以让屏幕阅读器用户更容易进入菜单并访问子菜单。

下面是一个增强的无障碍折叠菜单的实现：

// javascriptcn.com 代码示例
<div role="menu">
  <div role="menuitem" aria-expanded="false" tabindex="0" aria-controls="submenu1">
    <a href="#" aria-label="Toggle menu item 1">Menu item 1</a>
    <ul id="submenu1" role="menu" aria-label="Submenu 1">
      <li><a href="#">Submenu item 1</a></li>
      <li><a href="#">Submenu item 2</a></li>
      <li><a href="#">Submenu item 3</a></li>
    </ul>
  </div>
  <div role="menuitem" aria-expanded="false" tabindex="0" aria-controls="submenu2">
    <a href="#" aria-label="Toggle menu item 2">Menu item 2</a>
    <ul id="submenu2" role="menu" aria-label="Submenu 2">
      <li><a href="#">Submenu item 1</a></li>
      <li><a href="#">Submenu item 2</a></li>
      <li><a href="#">Submenu item 3</a></li>
    </ul>
  </div>
  <div role="menuitem" aria-expanded="false" tabindex="0" aria-controls="submenu3">
    <a href="#" aria-label="Toggle menu item 3">Menu item 3</a>
    <ul id="submenu3" role="menu" aria-label="Submenu 3">
      <li><a href="#">Submenu item 1</a></li>
      <li><a href="#">Submenu item 2</a></li>
      <li><a href="#">Submenu item 3</a></li>
    </ul>
  </div>
</div>

在这个改进后的实现中，我们使用 aria-controls 属性将菜单项与它们的子菜单关联起来。我们还通过设置 tabindex="0" 属性来使菜单项获得焦点，并通过键盘控制进入到子菜单。

总结

通过使用 ARIA 属性，我们可以很容易地实现无障碍折叠菜单。这种菜单对于所有人来说都是非常有用的，特别是对于那些视力或听力有障碍的访问者来说更为重要。我们可以使用基础的 ARIA 属性来定义菜单项和菜单容器，并使用 aria-expanded 属性来指示菜单项的状态。如果我们想要增加菜单的可用性和无障碍性，我们可以使用 aria-controls 属性和 tabindex 属性将菜单项与其子菜单关联起来。

让我们早些时候关注无障碍性，并且在每一个网站和 Web 应用程序中考虑到无障碍性。通过这样做，我们可以使我们的网站变得更可达和更易于使用。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654791317d4982a6eb1e9260