必须用<nav aria-label="Breadcrumb">包裹<ol>，因<nav>声明导航区域、<ol>表达路径严格顺序，而<div>无语义、<ul>表无序集合；末项须设aria-current="page"，分隔符用CSS伪元素并加aria-hidden="true"。
为什么用 nav + ol 而不是 div 或 ul
因为屏幕阅读器依赖语义识别导航路径，nav 告诉辅助技术“这是导航区”，ol 表达“路径有严格先后顺序”——ul 会被读成“一组并列项目”，div 则完全无导航含义。Lighthouse 会直接标红“语义缺失”。即使你用 CSS 把 ol 的数字序号隐藏了（list-style: none），其层级逻辑依然被读屏器正确解析为“第1项 → 第2项 → 第3项”。
分隔符必须用 ::after 伪元素，不能写死在 HTML 里
写死 / 或 > 会导致读屏器朗读“首页斜杠产品斜杠详情页”，破坏语义连贯性。正确做法是只对非末项生成分隔符，并加 aria-hidden="true" 隐藏其可访问性：
nav ol li:not(:last-child)::after {
content: "›";
margin: 0 0.5em;
aria-hidden: true;
}
- 用
›（U+203A）比>更轻量，视觉更协调 - 别用
!important覆盖，它和 Bootstrap 等框架的--bs-breadcrumb-divider变量冲突 - 若需 RTL 支持，在
nav上加dir="ltr"，防止分隔符被镜像
移动端响应式：截断中间层级比强制换行更可控
长路径（如 首页 › 文档 › 指南 › API › 响应格式）在小屏上撑破容器或折行错乱是常见问题。纯 CSS 截断难精准控制哪几级该留，所以更稳妥的做法是：
- 后端或构建时注入结构化数据，只渲染首项、末项 + 中间省略项（
<li class="ellipsis">…</li>） - 若必须前端处理，用 JS 根据
ol li数量动态添加hidden类，而非依赖text-overflow: ellipsis（它对 flex 容器支持不稳定） - 绝对不要用
white-space: nowrap+overflow-x: auto，除非同时加scrollbar-width: none和-webkit-scrollbar隐藏样式，否则滚动条丑且占空间
aria-current="page" 必须加在当前页 li 上，且值只能是 "page"
这是唯一被 JAWS/NVDA/VoiceOver 正确识别为“当前位置”的方式。写成 class="active"、aria-disabled="true" 或 aria-current="true" 全部无效。常见错误包括：
立即学习“前端免费学习笔记（深入）”；
- 加在
a标签上（当前页不应是链接，li才是语义终点） - 加在
ol或nav根节点（语义错位） - 当前页是分类页（如
/products/）时，仍给它加href，导致误点击刷新
最易被忽略的是：静态页面无法靠 window.location.pathname 自动推导真实业务层级，手写结构或构建时注入才是唯一可靠方式——URL 路径和信息架构常常不一致。
