多个导航区块必须为每个添加唯一准确的aria-label或aria-labelledby，结构上用<ul>或<ol>区分类型，响应式菜单需同步aria-expanded、aria-hidden及焦点管理。
每个
页面里出现多个导航区块时，必须为每一个单独标注用途。不能所有都写 aria-label="Navigation"，也不能漏掉任意一个。
- 主导航：用
aria-label="主导航"或aria-label="Main navigation" - 面包屑：用
aria-label="Breadcrumb"（注意不是 "Breadcrumbs"） - 页脚快捷链接：用
aria-label="页脚资源链接"，避免写成"页脚导航" - 语言切换区：功能是切换而非跳转，更适合
aria-label="语言选择"
aria-label 和 aria-labelledby 怎么选
看导航上方有没有可见标题。有就用 aria-labelledby 指向那个标题；没有就直接用 aria-label。
- 无标题场景：
<nav aria-label="主导航"><ul><li><a href="/home">首页</a></li></ul></nav> - 有隐藏标题场景：
<h2 id="main-nav" class="visually-hidden">主导航</h2><nav aria-labelledby="main-nav">...</nav> - 别两个属性一起写，aria-labelledby 会覆盖 aria-label
内部结构也影响无障碍体验
导航内容怎么组织，直接影响读屏器播报逻辑和键盘操作流畅度。
- 主导航、页脚链接这类无强顺序的集合，用
<ul>最稳妥 - 面包屑、步骤条这类有明确路径顺序的，必须用
<ol>，读屏器会读出“第1项”“第2项” - 当前页链接保留
href，仅加aria-current="page"；不要用aria-disabled="true"或删 href - 分隔符（如 "/" 或 ">"）用
<li aria-hidden="true">/</li>包裹，或纯 CSS 伪元素生成
响应式菜单别只靠 display: none
移动端折叠菜单常被 JS 隐藏，但屏幕阅读器和键盘用户需要知道状态变化。
- 触发按钮要带
aria-expanded="false"，展开后改为"true" - 按钮加
aria-controls="nav-id"，指向对应<nav id="nav-id"> - 菜单展开后，焦点要自动移到第一个链接；关闭后，焦点回退到触发按钮
