面包屑导航不应直接用包裹，而应使用并为当前页链接添加aria-current=”page”；分隔符需用aria-hidden=”true”隐藏，确保键盘与屏幕阅读器可访问。
面包屑导航要不要用
包裹
不用。面包屑不是主导航，
语义上专指网站级主要导航（如顶部菜单、侧边栏），而面包屑是辅助性路径提示。W3C 明确建议用
或
+ ARIA 标记，更准确的是
用
—— 这属于“可选但推荐”的折中方案：既保留语义，又不违背规范。
aria-current="page" 必须加在当前页链接上
这是屏幕阅读器识别“你现在在哪”的唯一可靠方式。漏掉它，视障用户会误以为最后一条仍是可点击的跳转项。
用 aria-current="page" 而不是 项目详情 的原因
面包屑是严格有序的层级路径（首页 → 分类 → 子类 → 当前页），
天然表达顺序关系，对辅助技术更友好，且默认带数字序号（可用 css
隐藏）。
CSS 样式里最容易忽略的可访问性细节
仅用「/」或「›」做分隔符不够：它们不是语义分隔，也不能被屏幕阅读器自然朗读。正确做法是用
隐藏视觉符号，并确保链接本身有足够对比度（≥4.5:1）和点击热区（最小 44×44px）。
立即学习“前端免费学习笔记（深入）”；
- 分隔符应写成：
list-style: none - 避免用 background-image 模拟箭头——它无法缩放，也不随系统字体设置变化
- 移动端记得加
aria-hidden="true"防止 300ms 点击延迟
面包屑真正的难点不在结构，而在让每一步都经得起键盘 Tab、屏幕阅读器逐项朗读、以及缩放 200% 后仍清晰可辨。很多页面加了面包屑却没设 或用了不可见的 svg 分隔符，结果对辅助技术完全失效。