面包屑导航必须用 包裹，内部用 或 结构，当前页用 aria-current="page" 标识，分隔符通过 CSS 实现，图标需配 visually-hidden 文本确保可访问性。
面包屑导航应当用 包裹，并通过 aria-label="Breadcrumb" 明确其作用；内部结构推荐使用无序列表（，当前页用 aria-current="page" 标识，而非仅靠视觉样式区分。
语义化结构：用 nav + ol/ul 而非 div 堆砌
面包屑本质是导航性组件，必须包裹在 仅靠文字“当前页”或禁用链接无法让辅助技术理解状态。必须用 很多设计要求图标代替文字（如首页用?），或用极简符号（如 中，并添加 aria-label="Breadcrumb"。虽然规范允许用 拼接。
代表路径中一个明确层级，适合严格线性路径（如首页 → 分类 → 子类 → 当前页）/ 或 >）应放在 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 或 #）aria-label 或 首页
视觉隐藏与可访问文本的平衡写法
>）。此时必须补充不可见但可读的文本，确保信息不丢失。
首页，配合 CSS 隐藏但保留在读取流中，既不朗读也不聚焦display: none 或 visibility: hidden 隐藏关键文本——它们会彻底移除可访问性树中的节点完整可复制示例（含注释）
.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;
}
