面包屑导航必须用包裹结构，上级页用链接，当前页用标识，分隔符须由CSS伪元素生成且aria-hidden="true"，缺一不可。
ol 本身不适合直接做面包屑导航——它只是个有序列表容器，没有语义化导航能力，也不支持链接嵌套和当前页标识；真要用，得配合 <li>、<a></a> 和 <span></span> 手动构造，且必须加 aria-current="page" 才算可访问。
为什么不能只靠 <ol></ol> 实现面包屑
面包屑本质是导航路径，核心需求是：有层级关系、每项可点击（除当前页）、支持屏幕阅读器识别“当前位置”。<ol></ol> 只定义编号顺序，不表达“导航”或“位置”语义。W3C 明确推荐用 <nav></nav> 包裹，内部用 <ol></ol> 或 <ul></ul> 均可，但结构和属性缺一不可。
- 缺少
role="navigation"或<nav></nav>外层，辅助技术无法识别这是导航区 -
<ol></ol>里的<li>默认无交互能力，必须手动加<a></a>或<span></span> - 当前页项若仍用
<a></a>，会误导用户可跳转，也违反 WCAG 2.1 - 浏览器不会自动渲染「>」或「/」分隔符，全靠 CSS 或额外 HTML 插入
正确写法：用 <nav></nav> + <ol></ol> + 语义化标记
下面是最小可用且符合 ARIA 实践的写法：
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">首页</a></li>
<li><a href="/products">商品</a></li>
<li><a href="/products/electronics">数码</a></li>
<li><span aria-current="page">无线耳机</span></li>
</ol>
</nav>
关键点：
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
立即学习“前端免费学习笔记（深入）”；
-
aria-label="Breadcrumb"让屏幕阅读器知道这是面包屑，比单纯用role="navigation"更精准 - 当前页必须用
<span></span>（非<a></a>），并带aria-current="page"，这是可访问性硬要求 - 所有链接需为绝对或语义清晰的相对路径，避免
javascript:void(0)等伪链接 - 不要依赖
<ol></ol>的默认数字序号——CSS 中通常设list-style: none，再用::after加分隔符
CSS 分隔符怎么加才不破坏语义和可访问性
分隔符（如 > 或 /）必须用 CSS 生成，不能写死在 HTML 里，否则会被读屏软件朗读，干扰理解。
- 错误写法：
<li>首页</li> <li>></li> <li>商品</li>→ 屏幕阅读器会读出“首页 箭头 商品”，完全错误 - 正确写法：用
ol li:not(:last-child)::after添加内容，同时加aria-hidden="true"（如果用伪元素）或确保其不进入无障碍树 - 推荐 CSS：
nav ol { display: flex; } nav ol li { margin-right: 0.5em; } nav ol li:not(:last-child)::after { content: ">"; margin-left: 0.5em; color: #999; aria-hidden: true; }
真正难的不是写 <ol></ol>，而是让每个环节都经得起自动化检测（如 axe）和手动辅具测试。比如 aria-current="page" 漏了，或 <nav></nav> 缺了 aria-label，整条面包屑对视障用户就等于不存在。
