面包屑导航必须用 <nav aria-label="Breadcrumb"> 包裹，层级链接用 <a>，当前页用 <span aria-current="page">，分隔符用 ::before 伪元素并设 aria-hidden="true"，确保语义、可访问性与路径真实统一。
面包屑导航用 <nav> 包裹才符合语义
不加语义容器的面包屑只是视觉效果，对屏幕阅读器和 SEO 都不友好。必须用 <nav aria-label="Breadcrumb"> 包裹整个结构，aria-label 是关键，不能省略或写成 aria-labelledby。
常见错误是直接用 <div> 或 <p> 套链接，这样无法被辅助技术识别为导航路径。
-
<nav>必须存在，且建议加上aria-label="Breadcrumb" - 每个层级用
<a>，最后一级用<span>（不可点击，避免误导） - 分隔符（如
/或>）应放在<span>里，不要用伪元素生成，否则可能被读屏软件跳过
aria-current="page" 比 CSS 类更可靠
很多教程教用 class="active" 标记当前页，但这是纯样式标记，对辅助技术无效。WAI-ARIA 规范明确推荐用 aria-current="page" 来声明当前位置。
这个属性会被主流读屏软件（NVDA、VoiceOver）识别并朗读为“当前页面”，比任何 class 名都准确。
立即学习“前端免费学习笔记（深入）”；
- 只加在最后一项（当前页）的
<span>上，不要加在<a>上 - 值必须是
"page"（不是"true"或"current"） - 配合 CSS 可以这样写：
[aria-current="page"] { font-weight: bold; }
用 CSS 实现简洁分隔，避免多余 DOM 节点
不需要为每个分隔符单独写一个 <span> 元素。用 ::before 伪元素 + :not(:first-child) 更干净，也减少可访问性干扰。
注意：如果用 / 作为分隔符，要确保它不会被读屏软件误读为“斜杠”而非“分隔”。加 aria-hidden="true" 是稳妥做法。
- 推荐 CSS 写法：
.breadcrumb > *:not(:first-child)::before { content: "/"; margin: 0 0.5em; aria-hidden: "true"; } - 若需支持 IE，改用真实
<span aria-hidden="true">/</span>插入 - 避免用 SVG 或图标字体做分隔符，除非同时提供
aria-hidden="true"
动态生成时注意 URL 和文本的一致性
服务端渲染或 JS 动态生成面包屑时，最容易出错的是链接 href 和显示文本不匹配，比如路径是 /products/shoes，但显示成“运动鞋”却没对应到实际分类层级。
尤其当有重定向、别名或 i18n 时，<a> 的 href 必须指向用户点击后真正到达的页面，否则会破坏导航可信度。
- 每级
<a>的href应该是绝对路径（如/products），避免相对路径歧义 - 文本内容应反映该路径的真实语义，而不是从 URL slug 直接截取（例如
shoes→ “鞋类”，不是 “shoes”） - 如果当前页是搜索结果页或过滤页，面包屑末尾不宜硬套“搜索”字样，而应退回到上一级真实分类
aria-current 的正确取值和 <nav> 的必要性——这两点不做到位，再漂亮的样式也只是摆设。 
