必须包裹至少两个真实跳转链接并用结构，禁止单链接、搜索框或按钮；须配aria-label明确用途，否则语义失效、读屏器仅读“navigation”。
必须用 <nav></nav> 包裹完整导航集合，不能只套单个链接；<nav></nav> 里不能塞搜索框或登录按钮，否则语义失效、SEO 和屏幕阅读器都会出问题。
为什么 <nav></nav> 不能只包一个 @#@#@#@#@#@#@#@#@#@0。这会让屏幕阅读器忽略“导航”意图，直接当普通段落读——因为导航的本质是一组跳转路径，不是单点入口。
- 正确结构必须含列表：
<nav><ul>
<li><a>首页</a></li>
<li><a>关于</a></li>
</ul></nav>
- 如果不用
<ul></ul>，也得用带 role="list" 的 <div> 模拟语义，但优先选原生列表
<li>同一页面可有多个 <code><nav></nav>，比如页眉主导航 + 页脚快捷入口，但每个都需明确用途
<nav></nav> 里混搜索框或按钮会怎样
写成 <nav><form>...</form>
<button>登录</button><ul>...</ul></nav> 是典型语义污染。搜索引擎和读屏器无法区分“导航”和“操作”，可能降权或跳过整个 <nav></nav> 区域。
- 搜索框应放
<header></header> 内独立位置，或用 <section role="search"></section>
- 登录/注册按钮属于用户操作，适合放在
<header></header> 右侧或下拉菜单中
- 唯一例外：纯锚点跳转按钮（如“回到顶部”）可保留在
<nav></nav> 中，前提是它本身构成导航行为
不加 aria-label 的 <nav></nav> 会被读屏器怎么读
无障碍检测工具会报 navmissing label 错误。没有文字标题的导航（比如只有图标或汉堡菜单），光靠 <nav></nav> 标签，读屏器只会读“navigation”，用户根本不知道这是主菜单、社交链接还是面包屑。
- 没可见标题时，必须加
aria-label="主导航" 或 aria-label="页脚导航"
- 已有
<h2>网站导航</h2> 这类标题，就用 aria-labelledby="id" 关联
- 别用
title 属性替代——它只在悬停时触发，对键盘或语音用户无效
<nav></nav> 放哪儿才算结构合理
很多人把 <nav></nav> 直接扔在 <header><nav></nav></header>，这样既表明“这是页头里的导航”，又避免 <nav></nav> 孤立存在。
-
<nav></nav> 可以出现在 <header></header>、<aside></aside> 或 <footer></footer> 中，但不能裸露在 <main></main> 内部
- 多 tab 页面（如“参数/评价/问答”）的 tab 切换栏，不是导航，该用
<section></section> + role="tablist"，而不是 <nav></nav>
- 用 DevTools 检查
<nav></nav> 是否被包裹在 <header></header> 或其他语义父容器中，能快速判断结构是否可信
真正难的不是写对标签，而是每次加 <nav></nav> 前问一句：它是不是一组真实、独立、可被用户用来跳转的链接？如果不是，就该换标签或拆出去。
<nav><ul>
<li><a>首页</a></li>
<li><a>关于</a></li>
</ul></nav>
<ul></ul>，也得用带 role="list" 的 <div> 模拟语义，但优先选原生列表
<li>同一页面可有多个 <code><nav></nav>，比如页眉主导航 + 页脚快捷入口，但每个都需明确用途
<nav></nav> 里混搜索框或按钮会怎样
写成 <nav><form>...</form>
<button>登录</button><ul>...</ul></nav> 是典型语义污染。搜索引擎和读屏器无法区分“导航”和“操作”，可能降权或跳过整个 <nav></nav> 区域。
- 搜索框应放
<header></header>内独立位置，或用<section role="search"></section> - 登录/注册按钮属于用户操作，适合放在
<header></header>右侧或下拉菜单中 - 唯一例外：纯锚点跳转按钮（如“回到顶部”）可保留在
<nav></nav>中，前提是它本身构成导航行为
不加 aria-label 的 <nav></nav> 会被读屏器怎么读
无障碍检测工具会报 navmissing label 错误。没有文字标题的导航（比如只有图标或汉堡菜单），光靠 <nav></nav> 标签，读屏器只会读“navigation”，用户根本不知道这是主菜单、社交链接还是面包屑。
- 没可见标题时，必须加
aria-label="主导航"或aria-label="页脚导航" - 已有
<h2>网站导航</h2>这类标题，就用aria-labelledby="id"关联 - 别用
title属性替代——它只在悬停时触发，对键盘或语音用户无效
<nav></nav> 放哪儿才算结构合理
很多人把 <nav></nav> 直接扔在 底层，其实它该嵌套在更上层语义容器里。最常见且推荐的组合是 <header><nav></nav></header>，这样既表明“这是页头里的导航”，又避免 <nav></nav> 孤立存在。
-
<nav></nav>可以出现在<header></header>、<aside></aside>或<footer></footer>中，但不能裸露在<main></main>内部 - 多 tab 页面（如“参数/评价/问答”）的 tab 切换栏，不是导航，该用
<section></section>+role="tablist"，而不是<nav></nav> - 用 DevTools 检查
<nav></nav>是否被包裹在<header></header>或其他语义父容器中，能快速判断结构是否可信
真正难的不是写对标签，而是每次加 <nav></nav> 前问一句：它是不是一组真实、独立、可被用户用来跳转的链接？如果不是，就该换标签或拆出去。
