nav标签需配合aria-label实现语义区分，中文用“主导航”等具体命名，英文用“main navigation”等；必须显式添加role="navigation"并避免嵌套；结构须用ul/ol正确表达层级，当前页用aria-current="page"，禁用项用disabled或aria-disabled="true"。

标签本身是语义化容器，不是“无障碍说明书”。它告诉辅助技术“这里是一段导航”，但不说明“这是主导航、面包屑，还是页脚链接”。当页面存在多个

时，屏幕阅读器（如NVDA、VoiceOver）只会统一读作“导航区域”，用户无法区分上下文，必须手动摸索。因此，nav 与 ARIA 的配合不是可选项，而是必要操作。

必须加 aria-label，且命名要具体

单独写 <nav></nav> 等于没写；<nav aria-label="Navigation"></nav> 也等于没写——太泛，缺乏区分度。

• 中文场景用：aria-label="主导航"、aria-label="面包屑导航"、aria-label="页脚快捷链接"
• 英文场景统一用：aria-label="Main navigation"、aria-label="Breadcrumb"（注意不是复数形式）
• 避免空泛词：“Menu”“Links”“Navigation”——读屏器已知它是导航，缺的是“做什么”
• 同一页面不能有两个相同 aria-label 值，否则快捷键跳转时无法定位唯一目标

role="navigation" 要不要显式加？

现代浏览器中，<nav></nav> 隐式等价于 role="navigation"，但旧版读屏器（如 JAWS 16、NVDA 2019.2 之前）可能忽略语义。为兼容性兜底，建议显式加上：

Qwen

Qwen是一款由阿里云推出的大语言模型和多模态模型系列。

下载

• <nav role="navigation" aria-label="主导航"></nav>
• 不要写 role="nav" 或 aria-role="navigation"——非标准写法，无效
• 所有 <nav></nav> 都应加，包括页脚、侧边栏里的次要导航
• 禁止嵌套 <nav></nav>：子菜单应放在父 <li> 内，用 <ul></ul> 表示层级，而非再套一层 <nav></nav>

内部结构必须语义正确

导航不是链接堆砌区，而是有逻辑的可访问集合。结构选错会破坏读屏体验。

• 主导航、页脚链接等无强顺序关系 → 用 <ul></ul>，每个项是 <a></a> 或 <button></button>
• 面包屑、步骤条、路径类导航 → 必须用 <ol></ol>，读屏器会播报“第1项”“第2项”，帮助感知深度
• 禁用 role="list" 或 role="navigation" 套在 <ul></ul> 上——重复声明，干扰默认行为
• 分隔符（如 / 或 >）要用 <li aria-hidden="true"> 包裹，或纯 CSS 伪元素生成，避免被读出

当前页与禁用状态的正确标注

“当前页”不是禁用按钮，而是语义终点；灰掉的“下一页”也不是视觉装饰，而是需明确传达的状态。

• 当前页链接必须保留 href（哪怕指向当前 URL），确保可聚焦、可回车触发（JS 可拦截）
• 仅在对应 <a></a> 上加 aria-current="page"，值只能是 "page"，不可用 "true" 或 "active"
• 禁用项（如不可点击的翻页按钮）应使用 <button disabled></button>，或 aria-disabled="true" + tabindex="-1"，并同步视觉样式
• 切勿给整个 <nav></nav> 加 aria-current 或 aria-disabled——它们只作用于具体交互元素