如何正确使用 ARIA 属性构建可访问的移动端导航菜单

本文详解移动端可折叠导航菜单中 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），用户无需被告知“打开”。应聚焦导航内容本身：

1. ✅ aria-label="Main navigation"
2. ✅ aria-label="Site navigation"
3. ✅ aria-label="Primary menu"

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

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

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

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

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

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

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

1. 菜单容器：添加 role="navigation"，强化其作为导航区域的身份；
2. 焦点管理：菜单展开时，应将键盘焦点移至第一个可聚焦子项（如首个 <a>）；关闭时，焦点应回到触发按钮；
3. 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><!-- 导航菜单 --><navid="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>

✅ 最终检查清单

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

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