必须用，它专为“主要导航链接集合”设计，浏览器和读屏软件将其识别为导航区域；仅为通用内容分组，无导航语义。
导航结构该用 <nav></nav> 还是 <section></section>？
必须用 <nav></nav>。它专为“主要导航链接集合”设计，浏览器和读屏软件会将其识别为导航区域；而 <section></section> 是通用内容分组，不带语义导航含义，用了等于没标。
- 只对全局性、重复出现的主导航（如顶部菜单、侧边栏）用
<nav></nav> - 页内锚点跳转菜单（比如文档目录）也适用
<nav></nav>，但建议加aria-label="页面目录"明确用途 - 避免嵌套多个
<nav></nav>—— 一个页面通常只需 1–2 个，多则混淆辅助技术
如何让导航项准确映射到功能模块？
靠 ID 关联，不是靠 class 或顺序。每个导航链接的 href 必须指向目标模块的唯一 id，且该模块需用语义化标签包裹（如 <main></main>、@#@#@#@#@#@#@#@#@#@0 → 对应 <section id="user-settings" aria-labelledby="nav-settings"></section>
tabindex="-1"，确保键盘聚焦时能停驻（否则跳转后焦点丢失）javascript:void(0) 或 # 占位——这会让导航失效，也不利于 SSR 和 SEO为什么用 aria-current="page" 比 CSS 类更可靠？
因为它是 WAI-ARIA 标准属性，读屏软件会朗读“当前页面：用户设置”，而 .active 这类 class 只对视觉有效，对辅助技术无意义。
- 服务端渲染时，在对应
<a></a>上直接写aria-current="page"，不要 JS 注入 - 值只能是
"page"（当前视图）、"step"（向导步骤）或"location"（地理位置），别写"true"或自定义字符串 - 配合 CSS 使用：
a[aria-current="page"] { font-weight: bold; }，样式和语义各司其职
单页应用（SPA）中如何保持导航语义不丢失？
路由切换时，必须手动更新 <nav></nav> 内链接的 aria-current，同时滚动到新模块并设置焦点 —— 浏览器不会自动做这些。
- 监听路由变化后，用
document.getElementById(hash.slice(1))查找目标元素 - 调用
element.focus()前，确保该元素有tabindex="-1" - 避免用
window.scrollTo(0, 0)：它把焦点带回顶部，用户得重新 tab 导航，体验断裂
最易被忽略的是焦点管理 —— 导航映射不只是“能跳”，而是“跳完就知道在哪、下一步怎么操作”。没处理好，对键盘用户和读屏用户就是不可用的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
