面包屑必须用nav包裹并设aria-label="breadcrumb"，结构用ol确保顺序语义，分隔符需aria-hidden，当前页用aria-current="page"。
nav 标签本身不说明“这是面包屑”，只告诉屏幕阅读器“这里是一组导航链接”。不加 aria-label，它和主导航、页脚链接全被读作“导航区域”，用户根本分不清哪是哪。
面包屑必须用 nav 包裹 + aria-label="Breadcrumb"
多个 nav 共存时，aria-label 是硬性要求，不是锦上添花：
- ✅ 正确写法：
<nav aria-label="Breadcrumb"><ol>...</ol></nav> - ❌ 错误写法：
<nav><div>首页 > 分类</div></nav>（无语义、不可访问） - ❌ 避免泛化：
aria-label="Navigation"或aria-label="Breadcrumbs"（复数形式非标准） - 中文界面可用
aria-label="面包屑导航"，但需实测 NVDA/Chrome 与 VoiceOver 表现是否稳定
ol 是唯一推荐结构，别用 ul 或 div
面包屑本质是线性、有顺序的路径，ol 提供原生序号语义，键盘用户按 Tab 或方向键能感知“第1项→第2项→第3项”：
-
ol让读屏器自动播报“第1项：首页”“第2项：产品”，帮助用户定位当前深度 -
ul会丢失顺序提示，div堆砌则完全无列表语义，即使加了aria-label也无效 - 分隔符（如
/）必须用<li aria-hidden="true">/</li>或 CSS::after实现，不能放在文本里直接写
当前页必须用 aria-current="page"，不是 aria-disabled
这是最常被搞错的一点：当前页不是“禁用链接”，而是“语义终点”。aria-disabled="true" 会让读屏器误判为“本可点击但暂时锁住”：
- 上级页保留
href，正常可跳转 - 当前页用
<li aria-current="page">无线耳机</li>，不要删href或加tabindex="-1" - 值只能是
"page"，不是"true"、"active"或"current" -
aria-current必须加在li或其内部元素上，不能加在nav根节点
容易被忽略的是：CSS 不影响语义，但会影响可访问性表现。比如用 flex 排列没问题，但若用 float 或绝对定位打乱 DOM 顺序，读屏器仍按源码顺序朗读，用户听到的路径就错乱了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
