先记住这个答案
<nav> 是重要导航链接集合的地标,站点菜单、文章目录和分页都可能使用它;正文里引用的一条外部链接则不需要单独包成导航。一个页面可以有多个导航区,读屏用户会在地标间切换,因此应让名称能区分“主菜单”和“文章目录”。命名时优先引用可见标题,没有标题再用 aria-label。
- 主菜单和目录可用
nav - 正文普通链接不必进
nav - 页面可有多个导航区
- 多个导航区要区分名称
页面的三种导航链接
文章页上方有站点菜单,左侧有章节目录,底部有“上一篇、下一篇”。这三组都可以是导航,但正文段落里引用的 MDN 链接只是内容引用,不是独立导航区。若页面有两个以上 nav,可分别标为“主导航”“文章目录”“上一篇与下一篇”,避免辅助技术只报出三个同名导航地标。视觉上排成一行的链接也不一定自动具备导航语义。
<nav aria-label="主菜单">
<a href="/blog">博客</a>
<a href="/docs">文档</a>
</nav>
<article><p>参考 <a href="/guide">这份指南</a>。</p></article>
<nav aria-label="文章目录"><a href="#part-1">第一节</a></nav>nav 为一组重要导航链接提供地标。
若页面已经有可见的“文章目录”标题,可以给标题一个 id,再用 aria-labelledby 引用它,让视觉用户和读屏用户看到同一个名称。只有视觉上没有标题时再考虑 aria-label。名称应说明用途,写“文章目录”就够了;辅助技术已经会报告导航地标,无需写成“文章目录导航”。
nav 标记重要导航集合
读屏用户可在地标之间快速切换,因此不宜把页面上所有零散链接都包装成导航区,否则地标列表会变得嘈杂。一个导航区可以包含标题、列表、按钮等辅助内容,但核心仍是导航目的。多个导航区的名称应描述用途,且不需要在名称里重复“导航”二字,因为角色本身已表达这一点。
分页是否算导航,要看它是不是让用户去另一页或另一段结果。比如“上一页”“下一页”是真实链接时,包在 <nav> 中比较自然;“展开筛选项”虽然也可能排在同一行,却只是操作按钮,不应因为位置靠近分页就一并当作导航链接。这个判断比看元素外观是否像菜单可靠。
页脚也可以有导航区;若页面已经有主菜单和文章目录,就给页脚链接另起清楚的名称,让地标列表里三组入口各自可辨。
容易答错的地方
- 所有
<a>都放进 nav - 正文引用、下载链接或操作链接不一定构成导航区。
- 一页只能有一个 nav
- 可以有多个不同用途的导航地标,关键是名称清楚。
面试官还会怎么问?
面包屑适合 nav 吗?
适合,它帮助用户在站点层级中导航,通常给它明确的名称。
分页按钮能放 nav 吗?
前后页链接形成导航集合时可以;纯本页状态按钮则不一定。
aria-label 必须写吗?
只有一个清楚的导航区时不一定;多个导航区建议给出可区分名称。
参考资料
示例用于理解所注明的运行环境与边界;延伸学习可结合原文中的更多案例。