HTML中aria-expanded使用教程

在HTML中，`aria-expanded` 属性用于指示可触发元素（如按钮）所控制内容的展开或折叠状态，对于提升网页可访问性至关重要。正确使用 `aria-expanded` 的关键在于将其应用于控制器元素，而非被控制的内容本身，并通过 `aria-controls` 属性指向被控区域的ID，实现辅助技术对元素间关系的明确识别。点击时，需同步切换内容显示与 `aria-expanded` 状态，确保视觉反馈与辅助功能信息的一致性。本文将深入探讨 `aria-expanded` 的正确用法、与 `aria-hidden` 的区别、常见应用场景（如折叠面板、下拉菜单、汉堡菜单）以及使用时的常见误区和注意事项，助你打造更易用、更友好的Web应用。理解并掌握 `aria-expanded`，让你的网站对所有用户都更加友好。

aria-expanded 应用在触控元素上，用于指示关联内容的展开或折叠状态，其值为 true 或 false。1. 它用于控制器（如按钮）而非内容本身，2. 通常与 aria-controls 配合指向被控区域的 ID，3. 点击时需同步切换内容显示与 aria-expanded 状态，4. 与 aria-hidden 不同，后者控制内容对辅助技术的可见性，5. 常见应用场景包括折叠面板、下拉菜单、汉堡菜单、显示/隐藏更多内容，6. 常见误区是错误地将 aria-expanded 放在内容上，7. 注意事项包括动态更新状态、确保键盘可访问、设置正确的初始状态及保持视觉反馈同步。

aria-expanded 在 HTML 中，是用来告诉辅助技术（比如屏幕阅读器）某个交互元素（比如按钮）所控制的区域，当前是处于展开状态还是折叠状态。简单来说，它就像一个开关指示灯，指明了关联内容的可见性状态。

解决方案

正确使用 aria-expanded 的核心在于，它应该被放置在触发展开/折叠动作的那个元素上，而不是被控制的内容本身。它的值可以是 true（表示内容已展开且可见）或 false（表示内容已折叠且不可见）。

通常，你会将它与 aria-controls 属性一起使用。aria-controls 指向你正在控制的那个内容区域的 ID，这样辅助技术就能明确知道哪个元素控制着哪个区域。

想象一下一个简单的折叠面板：

<button
  id="toggleButton"
  aria-expanded="false"
  aria-controls="collapsibleContent"
>
  点击展开/折叠
</button>

<div id="collapsibleContent" style="display: none;">
  <p>这是被折叠起来的内容，只有点击按钮后才会显示。</p>
</div>

<script>
  const toggleButton = document.getElementById('toggleButton');
  const collapsibleContent = document.getElementById('collapsibleContent');

  toggleButton.addEventListener('click', () => {
    const isExpanded = toggleButton.getAttribute('aria-expanded') === 'true';

    // 切换 aria-expanded 状态
    toggleButton.setAttribute('aria-expanded', String(!isExpanded));

    // 切换内容的显示/隐藏
    if (isExpanded) {
      collapsibleContent.style.display = 'none';
    } else {
      collapsibleContent.style.display = 'block';
    }
  });

  // 确保初始状态也同步，虽然这里HTML已经设置了，但JS初始化时可以再检查一下
  if (collapsibleContent.style.display === 'none') {
    toggleButton.setAttribute('aria-expanded', 'false');
  } else {
    toggleButton.setAttribute('aria-expanded', 'true');
  }
</script>

这段代码展示了一个很经典的用法。当用户点击按钮时，我们不仅要切换内容的 display 样式，更重要的是要同步更新 aria-expanded 的值。这就像我每次写这类交互时，都会提醒自己，视觉变化和辅助功能属性更新，两者缺一不可。

aria-expanded 和 aria-hidden 有什么区别？

这是一个非常好的问题，也是很多人初次接触 ARIA 时容易混淆的地方。我个人觉得，理解它们的区别，能让你对可访问性有更深的认识。

aria-expanded，我们刚才说了，它主要用在控制器（比如按钮）上，指示它所控制的区域是展开还是折叠。它描述的是“这个按钮打开了什么，或者关闭了什么”的状态。

而 aria-hidden 则完全不同，它用在内容本身上，告诉辅助技术这段内容是否应该被“看到”或“听到”。当 aria-hidden="true" 时，屏幕阅读器会完全忽略这部分内容，即使它在视觉上是可见的（这通常是错误的用法，但偶尔也有例外）。当 aria-hidden="false" 时，内容才会被辅助技术正常识别。

所以，它们经常是协同工作的： 当你的按钮 aria-expanded="false" 时，它所控制的那个内容区域，很可能也同时设置了 aria-hidden="true"。这样，屏幕阅读器就知道：这个内容不仅是折叠的（通过按钮的 aria-expanded），而且它目前对用户是不可访问的（通过内容本身的 aria-hidden）。 反之，当按钮 aria-expanded="true" 时，内容区域的 aria-hidden 应该被切换为 false。

举个例子，一个模态对话框（Modal）：当模态框被关闭时，触发按钮可能没有 aria-expanded（或者如果你用它来表示模态框的开启状态，那它可能是 false），但更重要的是，模态框的整个内容区域应该设置 aria-hidden="true"，确保屏幕阅读器不会读到隐藏的对话框内容。当模态框打开时，模态框内容区域的 aria-hidden 必须变为 false。

它们各自扮演着不同的角色，一个描述控制器的状态，另一个描述内容对辅助技术的可见性。理解这一点，对于构建复杂的交互组件至关重要。

在哪些常见场景下应该使用 aria-expanded？

aria-expanded 的应用场景非常广泛，只要是涉及到“点击一个元素，另一个区域随之展开或折叠”的交互，都应该考虑使用它。我平时在项目里，遇到这些情况基本都会用：

1. 折叠面板（Accordions）：这是最典型的场景。每个折叠面板的标题或触发按钮都应该有 aria-expanded 属性，指示其对应的内容区是展开还是收起。

   <!-- 头部按钮 -->
   <button aria-expanded="false" aria-controls="panel1">标题一</button>
   <!-- 对应内容区 -->
   <div id="panel1" role="region" aria-labelledby="panel1-heading" hidden>
       <!-- 内容 -->
   </div>

   这里 hidden 属性和 aria-hidden 类似，也可以用来控制视觉和辅助技术的可见性。

2. 下拉菜单（Dropdown Menus）：导航栏中的下拉菜单按钮，或者任何触发下拉列表的按钮，都应该使用 aria-expanded 来指示菜单是打开还是关闭。

   <button aria-expanded="false" aria-controls="dropdownMenu">
       产品
       <span aria-hidden="true">▼</span>
   </button>
   <ul id="dropdownMenu" hidden>
       <li><a href="#">产品A</a></li>
       <li><a href="#">产品B</a></li>
   </ul>

3. 汉堡菜单（Hamburger Menus）：在移动端或响应式设计中常见的“汉堡”图标按钮，用于切换侧边导航栏的显示与隐藏。这个按钮就应该带有 aria-expanded。

   <button aria-expanded="false" aria-controls="mainNav">
       <span class="hamburger-icon"></span>
       <span class="sr-only">菜单</span>
   </button>
   <nav id="mainNav" hidden>
       <!-- 导航链接 -->
   </nav>

   这里的 sr-only 是一个常见的 CSS 类，用于将文本隐藏在屏幕上，但仍对屏幕阅读器可见，提供更清晰的语义。

4. 显示/隐藏更多内容（Show More/Less）：例如文章摘要下方的“阅读更多”按钮，点击后显示全文。这个按钮也应该使用 aria-expanded。

本质上，只要用户界面中存在一个“切换可见性”的机制，aria-expanded 就应该被考虑进去。这能极大地提升使用辅助技术的用户的体验，让他们知道当前界面的状态，而不是盲目地探索。

使用 aria-expanded 时常见的误区和注意事项是什么？

尽管 aria-expanded 看起来简单，但在实际开发中，我确实见过不少开发者会犯一些小错误，或者忽略一些重要的细节。

1. 误区：将 aria-expanded 放在被控制的内容上。 这是最常见的误区。我看到过有人直接在 div 上写 aria-expanded="true"，这是完全错误的。这个属性是给控制器用的，它描述的是控制器所控制内容的状态。记住，它就像按钮上的指示灯，不是被控制区域的标签。

2. 注意事项：动态更新是关键。aria-expanded 的值必须随着内容的实际展开或折叠而动态更新。如果你的内容已经展开了，但按钮上的 aria-expanded 还是 false，那么屏幕阅读器用户就会得到错误的信息。这就像一个灯泡亮了，但开关上的指示灯还是熄灭的，会让人困惑。所以，在 JavaScript 中切换内容的可见性时，务必同步更新 aria-expanded。

3. 注意事项：与 aria-controls 配合使用（强烈推荐）。 虽然 aria-expanded 本身就能提供状态信息，但配合 aria-controls 使用，可以更明确地告诉辅助技术，这个按钮具体控制的是哪一个 ID 的元素。这就像给一个遥控器贴上标签，写明它控制的是“电视”还是“空调”。虽然不是强制性的，但它提供了更强的语义关联，对复杂的页面尤其有用。

4. 注意事项：键盘可访问性。 如果一个元素使用了 aria-expanded，那么它通常是一个可交互的元素（比如 button 或带有 role="button" 的 div）。确保这个元素可以通过键盘（Tab 键聚焦，Enter/Space 键激活）来操作。如果你的触发器不是原生的 button 或 a 标签，你可能需要手动添加 tabindex="0" 来使其可聚焦，并编写 JavaScript 来处理键盘事件。

5. 注意事项：初始状态的设置。 页面加载时，aria-expanded 的初始值应该与内容的初始可见状态一致。如果你的折叠面板默认是收起的，那么按钮上的 aria-expanded 应该初始化为 false。别小看这个细节，它决定了用户第一次接触你组件时的体验。

6. 技术挑战：状态同步与视觉反馈。 有时候，我们会在 CSS 中使用 [aria-expanded="true"] 这样的选择器来控制元素的样式（比如添加一个旋转图标来表示展开）。这要求你的 JavaScript 必须准确地更新 aria-expanded 属性，才能确保视觉和辅助功能状态的同步。我见过一些情况，视觉上内容展开了，但 aria-expanded 没变，或者反过来，这都是需要避免的。

总的来说，aria-expanded 是一个非常实用且重要的 ARIA 属性，它在提升 Web 可访问性方面扮演着关键角色。正确理解并应用它，能让你的交互组件对所有用户都更加友好。

终于介绍完啦！小伙伴们，这篇关于《HTML中aria-expanded使用教程》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！