关于HTML属性aria-expanded具体工作原理的技术咨询

嘿，我完全懂你这种感受——W3C的文档有时候确实太偏向规范描述，不够接地气！刚好我之前做响应式导航栏的时候也纠结过这个属性，给你掰扯清楚它的工作原理和实际用法：

它是ARIA（无障碍富互联网应用）规范里的一个状态属性，核心作用是给屏幕阅读器等辅助技术传递状态信息，告诉它们当前可折叠/展开的控制元素（比如导航栏的下拉按钮）对应的内容区域是处于「展开」还是「收起」状态。

划重点：它本身不会直接控制元素的显示或隐藏——很多新手容易误以为它能触发样式变化，其实它只是负责「告知状态」，真正的显示逻辑还是要靠CSS或JavaScript来实现。

• aria-expanded="true"：告知辅助技术，当前控制元素对应的内容区域是展开状态
• aria-expanded="false"：告知辅助技术，对应的内容区域是收起状态
• 不设置该属性（即值为undefined）：表示这个元素没有展开/折叠的功能，辅助技术会忽略状态提示

单独用aria-expanded意义不大，它需要和另外两个属性配合，才能让辅助技术完整理解控制关系：

• aria-controls：添加在控制按钮上，值是被控制的折叠内容的ID。比如按钮上写aria-controls="navbar-dropdown"，辅助技术就会知道这个按钮是用来控制哪个区域的展开/折叠
• aria-haspopup：如果是下拉菜单这类弹出式内容，可以添加这个属性并设为true，告诉屏幕阅读器这个按钮会弹出一个菜单类的内容

给你看一个简化的响应式导航栏代码片段，直观理解它的工作流程：

<!-- 导航栏折叠触发按钮 -->
<button 
  id="navbar-toggle-btn"
  aria-expanded="false"
  aria-controls="mobile-nav-menu"
  aria-haspopup="true"
>
  ☰ 菜单
</button>

<!-- 被控制的移动端导航菜单 -->
<ul id="mobile-nav-menu" hidden>
  <li><a href="/home">首页</a></li>
  <li><a href="/products">产品</a></li>
  <li><a href="/contact">联系我们</a></li>
</ul>

对应的JavaScript逻辑（简化版）：

const toggleBtn = document.getElementById('navbar-toggle-btn');
const navMenu = document.getElementById('mobile-nav-menu');

toggleBtn.addEventListener('click', () => {
  // 切换菜单的显示状态
  const isExpanded = navMenu.hidden;
  navMenu.hidden = !isExpanded;
  
  // 同步更新aria-expanded的值，保持状态一致
  toggleBtn.setAttribute('aria-expanded', isExpanded);
});

这里的核心是：每次切换内容的显示状态时，必须同步更新aria-expanded的值，否则会造成视觉状态和辅助技术读取的状态不一致，给无障碍用户带来困惑。

• 不要只改aria-expanded的值却不实际修改内容的显示状态，这属于「无障碍状态欺骗」，是开发大忌
• 不要给没有展开/折叠功能的元素添加这个属性，反而会误导辅助技术
• 即使你的导航栏只面向普通视觉用户，也建议加上这个属性——提升页面的无障碍性是专业开发者的基本素养

内容的提问来源于stack exchange，提问作者Willem van der Veen