必须包裹完整导航链接集合并设aria-label或aria-labelledby，禁止单链接、混入非导航元素，推荐原生列表结构，复用宜用服务端包含或构建工具。
<nav></nav> 不是装饰性容器，它必须包裹一组导航链接，且需明确语义边界——否则屏幕阅读器可能跳过、Lighthouse 报 Navigation landmark not present。
nav 必须包裹完整导航集合，不能只包单个链接
常见错误现象：<nav>首页</nav> 或 <nav>@#@#@#@#@#@#@#@#@#@0</nav>。这类写法会让辅助技术降级为普通段落，失去导航地标（landmark）作用。
- 正确结构是用
<ul></ul>或<ol></ol>包裹多个<li>，每个含一个<a></a> - 若视觉上不用列表（如横向 flex 导航），可用
<div role="list"> 替代，但优先选原生列表 <li>单个返回链接、面包屑里的当前页、或“打印本页”按钮，都不该塞进 <code><nav></nav> - 用
aria-label="主导航"适合命名固定、无需翻译的场景 - 用
aria-labelledby="nav-title"更灵活，对应一个隐藏但可访问的标题，例如<h2 id="nav-title" class="visually-hidden">管理面板导航</h2> - 别两个属性同时写，
aria-labelledby会覆盖aria-label - 搜索框应独立用
<search></search>标签包裹 - 登录区域建议用
<form></form>或<section aria-label="用户账户"></section> - 面包屑（Breadcrumbs）可以放
<nav></nav>，但必须加aria-label="当前位置" - 同一页面最多 2–3 个
<nav></nav>：例如<nav aria-label="主导航"></nav>+<nav aria-label="相关文章"></nav>+<nav aria-label="页脚快速入口"></nav> - 服务端包含（SSI）：改后缀为
.shtml，用<!--#include file="nav.html" -->，无 JS 依赖，SEO 友好 - 前端 fetch 动态加载：用
fetch('nav.html')插入到<div id="navbar"></div>，注意加catch处理失败 - 构建工具方案：Vite/Webpack 配合
html-webpack-plugin或vite-plugin-html注入；Vue/React 直接封装为组件 - 不推荐用
<iframe></iframe>或内联<object></object>：破坏语义流、影响焦点管理和无障碍遍历
aria-label 或 aria-labelledby 是硬性要求，不是可选项
没有可见标题的 <nav></nav>（比如纯图标汉堡菜单、无文字的页脚快捷入口），光靠标签名无法传达用途。屏幕阅读器只会读 “navigation”，用户不知道这是主菜单还是语言切换区。
nav 里不能混入非导航功能元素
搜索框、登录表单、主题切换按钮、语言下拉选择器，哪怕视觉上紧挨着导航栏，也不属于导航语义范畴。混入会导致自动化测试报 Landmark contains non-navigation content，键盘用户 Shift+Tab 也可能卡在非链接控件里。
静态页面中复用 nav 的实际方案
直接在每个 index.html 里手写一遍 <nav></nav> 结构，维护成本高、易出错。现代项目里有几种可靠复用方式：
最容易被忽略的一点：<nav></nav> 不提供任何默认样式或交互逻辑，它的价值全在语义层。写完记得跑一次 axe 或 Lighthouse，看是否触发 landmark-no-duplicate-main 或 navigation-landmark 类警告——这些不是“建议”，而是无障碍合规的实际门槛。
