必须用 包裹 ， 表达严格顺序语义，aria-current="page" 仅限当前页 且值必须为 "page"，分隔符须用 ::after + aria-hidden="true" 实现，移动端推荐结构化截断而非 CSS 溢出。

必须用

包裹

不用

，屏幕阅读器就当它是普通文字；不用

，而用

或

，Lighthouse 直接报“语义缺失”。

的核心价值不是序号，而是告诉辅助技术“这是有严格先后顺序的路径”，哪怕你用 list-style: none 隐藏了数字，它依然被读作“第1项 → 第2项 → 第3项”。

常见错误包括：

• 写成
  —— 无导航语义，键盘用户 Tab 过去时无声无息
• 用了
  却漏掉 aria-label="Breadcrumb" —— 部分读屏器不识别为导航类型
• 在单页应用中每次路由切换后手动改 aria-label 值 —— 其实这个值固定写死就行，不用动

aria-current="page" 只能加在当前页的

上

它不是 class，不是属性名可随便写，更不是加在 或

上。值必须是 "page"，写成 "true"、"current"、"location" 全部无效。JAWS/NVDA/VoiceOver 只认这一种。

关键细节：

• 当前页
• 里不能有 标签 —— 它是终点，不是链接
• 上级页（如 /products/）仍应是可点击的 ，只有末项才用
• 编辑器
• 静态页面中，aria-current="page" 无法靠 window.location.pathname 自动推导 —— URL 路径和真实业务层级经常不一致，必须手写或构建时注入

分隔符必须用 ::after 伪元素 + aria-hidden="true"

把 / 或 > 写死在 HTML 里，读屏器会连读成“首页斜杠产品斜杠编辑器”，完全破坏语义连贯性。正确做法是只对非末项生成视觉符号，并隐藏其可访问性。

推荐写法：


DeepBI DHTML 页面生成器
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
下载

nav ol li:not(:last-child)::after {
  content: "›";
  margin: 0 0.5em;
  aria-hidden: true;
}

注意点：

• 用 ›（U+203A）比 > 更轻量，视觉更协调
• 别加 !important —— 和 Bootstrap 5 的 --bs-breadcrumb-divider 变量冲突
• 若需 RTL 支持，在
  上加 dir="ltr"，防止分隔符被镜像

小屏响应式：前端截断中间层级比 CSS 强制换行更可控

长路径（如 首页 › 文档 › 指南 › API › 响应格式）在移动端撑破容器或折行错乱是高频问题。white-space: nowrap + overflow-x: auto 看似简单，但滚动条默认丑且占空间，还得额外加 scrollbar-width: none 和 -webkit-scrollbar 隐藏样式。

更稳妥的做法：

• 后端或构建时注入结构化数据，只渲染首项、末项 + 中间一个
• …
• 前端 JS 动态控制：根据 ol li 数量判断是否添加 hidden 类，而不是依赖 text-overflow: ellipsis（它在 flex 容器下支持不稳定）
• 绝对不要让当前页名被截断 —— 省略号必须出现在中间层级，当前页永远可见

最易被忽略的是：静态页面没有路由系统，所谓“自动推导层级”根本不存在。你写的每一级文本、每一个 href、每一份语义，都得自己对齐真实信息架构 —— 不是 URL 怎么拆，而是用户真正怎么理解这个页面的位置。