如何正确使用 ARIA 属性构建可访问的移动端导航菜单-html教程-PHP中文网

如何正确使用 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），用户无需被告知“打开”。应聚焦导航内容本身：

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

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

SingClaw

SingClaw是一款会记忆的 AI 数据桌面助手。

下载

<!-- 关闭按钮（位于菜单内部） -->
<button 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 :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 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>