必须用 包裹 ， 表达严格顺序语义，aria-current="page" 仅限当前页 且值必须为 "page"，分隔符须用 ::after + aria-hidden="true" 实现，移动端推荐结构化截断而非 CSS 溢出。
必须用 <nav aria-label="Breadcrumb"></nav> 包裹 <ol></ol>
不用 <nav></nav>，屏幕阅读器就当它是普通文字；不用 <ol></ol>，而用 <ul></ul> 或 <div>，Lighthouse 直接报“语义缺失”。<code><ol></ol> 的核心价值不是序号，而是告诉辅助技术“这是有严格先后顺序的路径”，哪怕你用 list-style: none 隐藏了数字，它依然被读作“第1项 → 第2项 → 第3项”。
常见错误包括：
- 写成
<div class="breadcrumb"> —— 无导航语义，键盘用户 Tab 过去时无声无息 <li>用了 <code><nav></nav>却漏掉aria-label="Breadcrumb"—— 部分读屏器不识别为导航类型 - 在单页应用中每次路由切换后手动改
aria-label值 —— 其实这个值固定写死就行，不用动 - 当前页
<li>里不能有<a></a>标签 —— 它是终点，不是链接 - 上级页（如 /products/）仍应是可点击的
<a href="/products/"></a>，只有末项才用<li aria-current="page">编辑器</li> - 静态页面中，
aria-current="page"无法靠window.location.pathname自动推导 —— URL 路径和真实业务层级经常不一致，必须手写或构建时注入
aria-current="page" 只能加在当前页的 <li> 上
它不是 class，不是属性名可随便写，更不是加在 <a></a> 或 <ol></ol> 上。值必须是 "page"，写成 "true"、"current"、"location" 全部无效。JAWS/NVDA/VoiceOver 只认这一种。
关键细节：
立即学习“前端免费学习笔记（深入）”；
分隔符必须用 ::after 伪元素 + aria-hidden="true"
把 / 或 > 写死在 HTML 里，读屏器会连读成“首页斜杠产品斜杠编辑器”，完全破坏语义连贯性。正确做法是只对非末项生成视觉符号，并隐藏其可访问性。
生成可在 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 支持，在
<nav></nav>上加dir="ltr"，防止分隔符被镜像
小屏响应式：前端截断中间层级比 CSS 强制换行更可控
长路径（如 首页 › 文档 › 指南 › API › 响应格式）在移动端撑破容器或折行错乱是高频问题。white-space: nowrap + overflow-x: auto 看似简单，但滚动条默认丑且占空间，还得额外加 scrollbar-width: none 和 -webkit-scrollbar 隐藏样式。
更稳妥的做法：
- 后端或构建时注入结构化数据，只渲染首项、末项 + 中间一个
<li class="ellipsis">…</li> - 前端 JS 动态控制：根据
ol li数量判断是否添加hidden类，而不是依赖text-overflow: ellipsis（它在 flex 容器下支持不稳定） - 绝对不要让当前页名被截断 —— 省略号必须出现在中间层级，当前页永远可见
最易被忽略的是：静态页面没有路由系统，所谓“自动推导层级”根本不存在。你写的每一级文本、每一个 href、每一份语义，都得自己对齐真实信息架构 —— 不是 URL 怎么拆，而是用户真正怎么理解这个页面的位置。
