面包屑导航必须用包裹结构，上级页用链接，当前页用标识，分隔符须由CSS伪元素生成且aria-hidden="true"，缺一不可。

ol 本身不适合直接做面包屑导航——它只是个有序列表容器，没有语义化导航能力，也不支持链接嵌套和当前页标识；真要用，得配合

、 和 手动构造，且必须加 aria-current="page" 才算可访问。

为什么不能只靠

实现面包屑

面包屑本质是导航路径，核心需求是：有层级关系、每项可点击（除当前页）、支持屏幕阅读器识别“当前位置”。

只定义编号顺序，不表达“导航”或“位置”语义。W3C 明确推荐用

包裹，内部用

或

均可，但结构和属性缺一不可。

• 缺少 role="navigation" 或
  外层，辅助技术无法识别这是导航区
• 里的
• 默认无交互能力，必须手动加 或
• 当前页项若仍用 ，会误导用户可跳转，也违反 WCAG 2.1
• 浏览器不会自动渲染「>」或「/」分隔符，全靠 CSS 或额外 HTML 插入

正确写法：用

+

+ 语义化标记

下面是最小可用且符合 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" 更精准
• 当前页必须用 （非 ），并带 aria-current="page"，这是可访问性硬要求
• 所有链接需为绝对或语义清晰的相对路径，避免 javascript:void(0) 等伪链接
• 不要依赖
  的默认数字序号——CSS 中通常设 list-style: none，再用 ::after 加分隔符

CSS 分隔符怎么加才不破坏语义和可访问性

分隔符（如 > 或 /）必须用 CSS 生成，不能写死在 HTML 里，否则会被读屏软件朗读，干扰理解。

• 错误写法：
• 首页
• >
• 商品
→ 屏幕阅读器会读出“首页 箭头 商品”，完全错误
• 正确写法：用 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;
  }

真正难的不是写

，而是让每个环节都经得起自动化检测（如 axe）和手动辅具测试。比如 aria-current="page" 漏了，或

缺了 aria-label，整条面包屑对视障用户就等于不存在。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！