标签仅用于主要导航区块,须配aria-label或aria-labelledby,内部宜用结构,避免语义滥用与隐藏失效。

nav 标签不是“必须包住所有链接”的容器
是语义化标签,表示页面中**主要的导航区块**,不是装饰性容器。浏览器、屏幕阅读器和搜索引擎靠它识别“这是导航区”,但不会自动添加样式或交互逻辑。
常见错误是把所有带链接的区域都套上 推荐优先使用 如果导航标题已存在(比如 立即学习“前端免费学习笔记(深入)”; 错误写法(纯 div 布局,无结构提示): 正确写法(语义清晰、可访问性强): 移动端常把导航收进“汉堡菜单”,用 JS 控制 复杂点在于:很多人以为“nav 只要存在就行”,却忽略了 JS 控制显隐时对无障碍状态的破坏。实际项目中,90% 的可访问性问题出在这里,而不是标签写没写对。,比如页脚友情链接、文章内“上一篇/下一篇”、侧边栏分类列表——这些通常不属于主导航,用 是不完整的。辅助技术无法知道这个导航叫什么、用途是什么。WAI-ARIA 要求为每个 提供可识别的名称。
,简洁直接:),可用 关联:网站导航
或 → 屏幕阅读器可能读作“导航”,无上下文,体验断裂aria-label,这会让部分读屏器跳过整个 aria-labelledby
class)作为唯一标识,仍需显式 ARIA 命名nav 内部结构要扁平,别嵌套 div 或 ul 当“布局工具”
本身不规定内部结构,但语义最佳实践是:用 aria-label + 组织链接列表,既符合习惯,也利于无障碍遍历(读屏器默认将 网站导航
aria-labelledby 识别为“列表”,告知用户共几项)。
aria-label,除非导航项有严格顺序依赖(极少见)aria-labelledby 里塞 aria-label=""、 等无关语义容器visually-hidden / ,不能只靠 HTML 结构响应式导航切换时,nav 的可见性与语义不能断开
或 。这时要注意:隐藏不等于销毁, 仍需保持语义有效。
→ 整个 从渲染树和无障碍树中移除,屏幕阅读器完全感知不到 —— 错误 或 → 元素仍在无障碍树中,但视觉不可见,易造成混淆 —— 不推荐aria-haspopup 或 aria-expanded 隐藏,同时确保 display: none(默认值)且未被 JS 错误设为 visibility: hidden











