可以，同一页面能用多个 nav，但必须各司其职并用 aria-label 或 aria-labelledby 显式标注唯一业务语义名称，如“主导航”“页脚导航”“管理面板”，避免语义过载与读屏混淆。
同一页面能用多个 nav 吗？可以，但必须各司其职
能，而且常见——比如顶部主导航 + 页脚快捷入口 + 侧边管理菜单。但浏览器和屏幕阅读器不会自动判断哪个是“主”，全靠你用 ARIA 显式标注。不加区分的多个 nav，读屏器只会连续报出“导航区域”“导航区域”，用户根本分不清哪组该优先操作。
nav 之间怎么区分？必须用 aria-label 或 aria-labelledby
不能只写 <nav></nav>，也不能用泛称如 aria-label="导航"。必须给出有业务含义的唯一标识：
-
aria-label="主导航"—— 适用于顶部横栏，含首页、产品、博客等核心跳转 -
aria-label="页脚导航"—— 用于页脚的“隐私政策”“联系我们”等辅助链接组 -
aria-label="管理面板"—— 后台系统中左侧垂直菜单，与前台主导航逻辑隔离 - 如果导航上方有可见标题（如
<h2 id="admin-nav">系统管理</h2>），可用aria-labelledby="admin-nav"替代，更适合多语言或动态文案场景
哪些情况不该拆成多个 nav？避免语义过载
不是所有视觉上分开的链接区都值得独立 nav。以下情形应合并或换标签：
- 面包屑（Breadcrumbs）可以单独用
<nav aria-label="当前位置"></nav>，但别塞进主导航里混用 - 二级下拉菜单仍是同一导航意图的展开，用嵌套
<ul><li> <a>产品</a><ul><li><a>Web 端</a></li></ul> </li></ul>即可，不要额外套一层nav - 文章内锚点列表（如“章节1 / 章节2 / 章节3”）通常用
<section aria-label="本文目录"></section>更准确，nav语义过重 - 单个链接（如“返回顶部”按钮）或仅含一个跳转项的容器，直接用
<p></p>或<div>，别硬套 <code>nav验证是否真生效？别信肉眼，要查 DOM 和读屏行为
写了
aria-label不代表就对了。容易被忽略的关键检查点：- 打开 Chrome DevTools，运行
document.querySelectorAll('nav')，确认数量与预期一致 - 用 Lighthouse 跑无障碍审计，看是否还有
Navigation landmark not present报错（说明某个本该有的nav缺失，或没标aria-label） - 用 NVDA 或 VoiceOver 测试：按 Insert+F7（NVDA）或 Ctrl+Option+U（VoiceOver），看能否列出带名称的导航区，且名称与你写的
aria-label完全一致 - 禁用 CSS 后检查源码顺序：如果面包屑用了
nav但 DOM 位置在主导航之后，读屏器会先读“当前位置”再读“主导航”，逻辑错乱——此时应调整 HTML 顺序，而非靠 CSSorder补救
nav”，而是“每个都标了什么名、有没有冲突、禁用样式后还对不对”。语义不是写完就生效，它活在 DOM 结构、ARIA 属性、和辅助技术的实时交互里。 - 打开 Chrome DevTools，运行
