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