本文详解移动端可折叠导航菜单中 aria-expanded、aria-controls、aria-hidden 和 aria-label 的规范用法，指出常见误用（如非法值、冗余标签），并提供符合 WCAG 2.1 和 ARIA 1.2 标准的完整实现示例。

本文详解移动端可折叠导航菜单中 `aria-expanded`、`aria-controls`、`aria-hidden` 和 `aria-label` 的规范用法，指出常见误用（如非法值、冗余标签），并提供符合 wcag 2.1 和 aria 1.2 标准的完整实现示例。

在构建具备良好无障碍支持（a11y）的移动端导航时，ARIA 属性不是“装饰性补充”，而是向屏幕阅读器精确传达组件状态与关系的关键桥梁。您当前的实现已具备基本结构意识，但存在几处关键偏差，可能影响语音导航用户的理解与操作效率。

✅ 正确用法要点解析

1. aria-expanded 必须为布尔字面量，不可绑定字符串变量

aria-expanded 是一个严格布尔型 ARIA 状态属性，仅接受 "true"、"false" 或省略（等价于 undefined）。将 Vue 模板中 :aria-expanded="active" 中的 active（通常为 boolean 类型）直接绑定是正确的，但务必确保其渲染结果是字符串 "true" 或 "false"，而非 JavaScript 布尔值 true/false（某些框架可能自动转换，但显式转换更稳妥）：

<!-- 推荐：显式转字符串，语义清晰且兼容性强 -->
<button
  :aria-expanded="active ? 'true' : 'false'"
  aria-controls="menu"
  aria-label="Main navigation"
>
  <!-- ☰ icon -->
</button>

⚠️ 错误示例：aria-expanded="active"（若 active 是 true，渲染为 aria-expanded="true" ✅；但若为 false，可能渲染为 aria-expanded="false" ✅——看似可行，但若 active 为 null/undefined，则生成 aria-expanded="undefined" ❌，违反规范）。

2. aria-label 应描述内容本质，而非交互行为

aria-label="Open menu" 是典型反模式。屏幕阅读器会自动播报按钮角色（如 “button”）及状态（通过 aria-expanded），用户无需被告知“打开”。应聚焦导航内容本身：

• ✅ aria-label="Main navigation"
• ✅ aria-label="Site navigation"
• ✅ aria-label="Primary menu"

同理，关闭按钮应简洁表明其功能目标：

<!-- 关闭按钮（位于菜单内部） -->
<button 
  @click="closeMenu" 
  aria-label="Close navigation"
>
  <span aria-hidden="true">×</span>
</button>

? 注意：<span aria-hidden="true"></span> 确保视觉符号“×”不被读出，避免与 aria-label 冲突。

3. 关闭按钮无需 aria-expanded 和 aria-controls

该按钮位于已展开的菜单内部，其作用是触发收起逻辑，不控制其他元素的展开状态，也不作为独立可切换控件存在。添加 aria-expanded 反而会造成语义混乱（它自身并非“可展开控件”）。只需确保：

• 它拥有明确的 aria-label；
• 点击后同步更新主按钮的 aria-expanded="false" 和菜单的 aria-hidden="true"；
• 菜单整体有 role="navigation" 明确语义。

4. 补充必要属性，完善语义链

• 菜单容器：添加 role="navigation"，强化其作为导航区域的身份；
• 焦点管理：菜单展开时，应将键盘焦点移至第一个可聚焦子项（如首个 <a></a>）；关闭时，焦点应回到触发按钮；
• aria-hidden 同步：确保与 aria-expanded 严格反向（即 :aria-hidden="!active" ✅），且菜单 DOM 在 aria-hidden="true" 时仍存在于 DOM 中（不可用 v-if 移除）。

? 完整合规代码示例

<!-- 触发按钮 -->
<button
  @click="toggleMenu"
  :aria-expanded="active ? 'true' : 'false'"
  aria-controls="menu"
  aria-label="Main navigation"
  class="hamburger"
>
  <span class="sr-only">Toggle navigation</span>
  <!-- ☰ SVG icon -->
</button>

<!-- 导航菜单 -->
<nav
  id="menu"
  :aria-hidden="!active ? 'true' : 'false'"
  role="navigation"
  class="mobile-menu"
  v-show="active"
>
  <div class="menu-header">
    <button 
      @click="closeMenu" 
      aria-label="Close navigation"
      class="close-btn"
    >
      <span aria-hidden="true">×</span>
      <span class="sr-only">Close navigation</span>
    </button>
  </div>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

✅ 最终检查清单

• [ ] aria-expanded 值仅为 "true" / "false" 字符串；
• [ ] aria-label 描述内容（“Main navigation”），非动作（“Open menu”）；
• [ ] 关闭按钮无冗余 aria-expanded / aria-controls；
• [ ] 菜单容器含 role="navigation"；
• [ ] aria-hidden 与可见性逻辑严格同步；
• [ ] 实现键盘焦点自动迁移（展开→菜单首项，关闭→触发按钮）。

遵循以上规范，您的移动端导航将真正满足 WCAG 2.1 AA 级别要求，为所有用户提供一致、可预测、可操作的无障碍体验。