必须包裹至少两个真实链接且用结构，禁止单链接或替代，否则语义失效、屏幕阅读器忽略、键盘导航跳过；须配aria-label和aria-current="page"。

必须用 <nav></nav> 包裹完整导航结构，且内部至少包含两个真实 @#@#@#@#@#@#@#@#@#@0 —— 即使视觉上像菜单，辅助技术也忽略它

IE11 及部分旧读屏器要求显式声明 role="navigation"，但现代标准优先用原生 <nav></nav>

<nav></nav> 里该用 <ul></ul> 还是直接放 @#@#@#@#@#@#@#@#@#@1，否则键盘用户无法感知位置

避免用 title 属性替代 aria-label —— title 不被 VoiceOver 默认朗读，且仅鼠标悬停触发

同一页面多个 <nav></nav> 时，label 必须区分用途，如 aria-label="主导航" 和 aria-label="相关文章导航"，不能都写“导航”

Flex 布局下 <li> 宽度塌陷是高频坑

<nav></nav> 本身无样式，但用 display: flex 布局 <ul></ul> 时，<li> 默认不占宽，所有链接挤成一团，移动端点不准、hover 热区消失。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 修复方式：给 <li> 加 flex: 1 或 min-width: max-content，确保每个项有独立可点击区域
• IE11 兼容注意：它对 flex 下的 <li> 渲染异常，稳妥方案是改用 display: inline-block + vertical-align: top
• 别在 <a></a> 上直接写 hover 样式 —— 应作用于 <li>，否则焦点状态（:focus）和悬停状态不一致，违反 WCAG 2.4.7

真正决定语义是否生效的，从来不是标签写了没，而是 DOM 里有没有真实、可访问、结构合规的 <a href></a> 节点，以及它们是否被正确关联到导航意图中。上线前务必用 NVDA + Firefox 或 VoiceOver + Safari 实测朗读流程，而不是只看页面长得像不像导航栏。

<nav aria-label="主导航"><ul>
<li><a href="/">首页</a></li>
<li><a href="/about">关于</a></li>
</ul></nav>

错误：<nav><a>首页</a><a>关于</a></nav>