面包屑导航必须用 包裹，内部用 或 结构，当前页用 aria-current="page" 标识，分隔符通过 css 实现，图标需配 visually-hidden 文本确保可访问性。
面包屑导航应当用 <nav></nav> 包裹，并通过 aria-label="Breadcrumb" 明确其作用；内部结构推荐使用无序列表（<ul></ul>），每项为 <li>，当前页用 aria-current="page" 标识，而非仅靠视觉样式区分。
语义化结构：用 nav + ol/ul 而非 div 堆砌
面包屑本质是导航性组件，必须包裹在 <nav></nav> 中，并添加 aria-label="Breadcrumb"。虽然规范允许用 <ol></ol>（强调顺序）或 <ul></ul>（更常见、更灵活），但禁止直接用一连串 <div> 或 <code><span></span> 拼接。
- 用
<ol></ol>时，每个<li>代表路径中一个明确层级，适合严格线性路径（如首页 → 分类 → 子类 → 当前页） - 用
<ul></ul>更通用，兼容动态生成、跳转逻辑复杂或存在“返回上一级”等非标准节点的场景 - 分隔符（如
/或>）应放在 CSS 中实现（如::after），不可写死在 HTML 里，避免干扰屏幕阅读器朗读
ARIA 增强：精准表达当前位置与导航意图
仅靠文字“当前页”或禁用链接无法让辅助技术理解状态。必须用 aria-current="page" 标注当前项，这是 WCAG 2.1 推荐做法，被主流屏幕阅读器（NVDA、VoiceOver、JAWS）原生支持。
- 不要用
aria-disabled="true"或tabindex="-1"替代aria-current，它们不传达语义，只影响焦点 - 若当前页仍可点击（如刷新自身），仍需保留
aria-current="page"，并确保链接 href 指向自身 URL（避免空 href 或 #） - 所有链接（包括当前页）都应有可访问的文本内容，避免仅用图标（如 home.svg）而无
aria-label或<span class="visually-hidden">首页</span>
视觉隐藏与可访问文本的平衡写法
很多设计要求图标代替文字（如首页用?），或用极简符号（如 >）。此时必须补充不可见但可读的文本，确保信息不丢失。
- 首页图标旁加
<span class="visually-hidden">首页</span>，配合 CSS 隐藏但保留在读取流中 - 分隔符用
<li aria-hidden="true"><span aria-hidden="true">/</span></li>，既不朗读也不聚焦 - 避免
display: none或visibility: hidden隐藏关键文本——它们会彻底移除可访问性树中的节点
完整可复制示例（含注释）
<nav aria-label="Breadcrumb">
<ul>
<li>
<a href="/" aria-label="首页">
<span class="visually-hidden">首页</span>
<svg aria-hidden="true" focusable="false">...</svg>
</a>
</li>
<li aria-hidden="true"><span aria-hidden="true">/</span></li>
<li><a href="/products">商品</a></li>
<li aria-hidden="true"><span aria-hidden="true">/</span></li>
<li><a href="/products/electronics">电子产品</a></li>
<li aria-hidden="true"><span aria-hidden="true">/</span></li>
<li aria-current="page">无线耳机</li>
</ul>
</nav>
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
