<nav>元素需配合aria-label或aria-labelledby才能被识别为主导航；单个<nav>位于<header>内不可依赖位置推测；多个<nav>必须用准确、唯一的标识区分功能。
nav 元素本身不自动代表“主导航”，必须配合语义化标记
浏览器和读屏软件不会仅凭 <nav> 就认定这是页面的主导航。它只是个通用导航容器，可能用于页脚链接、侧边相关文章、分页等。真正让辅助技术识别“主导航”的，是明确的上下文或 ARIA 标识。
常见错误是只写：
<nav><a href="/home">首页</a><a href="/about">关于</a></nav>——这会让屏幕阅读器读作“导航区域”，但无法区分是主菜单还是其他导航。
- 必须添加
aria-label="主导航"或aria-labelledby指向一个可见标题 - 如果页面只有一个
<nav>，且位于 header 内、紧邻 logo 下方，部分读屏器会结合 DOM 位置推测为主导航，但不可依赖 - 避免用
aria-label="导航"这类泛称——“主导航”“页脚导航”“面包屑导航”才具备区分度
aria-label 和 aria-labelledby 选哪个？看内容是否可见
如果主导航上方有清晰的视觉标题（比如 <h2 class="visually-hidden">主导航</h2>），优先用 aria-labelledby；否则直接用 aria-label。
示例（推荐）：
<h2 id="main-nav-label" class="visually-hidden">主导航</h2><br><nav aria-labelledby="main-nav-label"><br> <a href="/home">首页</a><br> <a href="/products">产品</a><br></nav>
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
-
aria-labelledby会读出标题文本，且支持多 ID 引用（如aria-labelledby="title desc"） -
aria-label完全绕过 DOM 文本，适合无视觉标题的简洁场景，例如：<nav aria-label="主导航">... - 不要同时写
aria-label和aria-labelledby——后者会覆盖前者
多个 nav 元素时，label 必须唯一且准确
一个页面可能出现主导航、语言切换导航、移动端折叠菜单、页脚分类导航等多个 <nav>。此时每个都需独立标识，不能全部用 aria-label="主导航"。
- 主导航：
aria-label="主导航"或aria-labelledby="main-nav" - 语言切换：
aria-label="语言选择"（不用“导航”，因其功能是切换而非跳转） - 页脚链接组：
aria-label="页脚资源链接"，而非“页脚导航”（避免与可操作的导航混淆） - 验证方式：用 Chrome + NVDA 或 VoiceOver 打开，按
D键遍历文档结构，确认每个<nav>的朗读内容是否符合预期
别忽略键盘焦点顺序和可访问性基础
即使 aria-label 写对了，如果主导航里链接没有合理 tabindex、或被 CSS display: none / visibility: hidden 隐藏（而非 visually-hidden 技巧），读屏器仍可能跳过或报错。
- 确保所有导航项是原生
<a>或带role="link"+tabindex="0"的元素 - 移动端下拉菜单需动态控制
aria-expanded和子菜单的aria-hidden - 禁用 JavaScript 时，
<nav>内容仍应可访问（即服务端渲染或降级 HTML 结构） - Chrome DevTools 的 “Accessibility” 面板能快速查看
<nav>的 computed accessible name 是否匹配你写的aria-label
nav + 明确的 aria-label 或 aria-labelledby 共同完成的。最容易被忽略的是：多个 <nav> 共存时 label 的准确性，以及 label 和实际焦点行为是否同步。 
