面包屑必须用包裹，禁用或复用其他；优先表线性路径，当前页必用aria-current="page"；分隔符须css伪元素实现且末项清除。
面包屑必须用 <nav></nav> 包裹并设 aria-label="Breadcrumb"
不加 <nav></nav> 或只用 <div> 套链接，等于放弃语义和可访问性。屏幕阅读器无法识别这是导航路径，SEO 也收不到结构化信号。
<p>关键点：</p>
<ul>
<li>
<code><nav aria-label="Breadcrumb"></nav> 是最低要求，不能省略 aria-label；写成 aria-label="" 或留空等同于没写
<nav></nav>（比如把面包屑塞进主导航的 <nav></nav> 里），每个导航区域需独立语义上下文<nav aria-label="主导航"></nav>，面包屑就必须另起一个 <nav aria-label="Breadcrumb"></nav>
内部用 <ol></ol> 还是 <ul></ul>？优先选 <ol></ol>，但 <ul></ul> 也可接受
<ol></ol> 更贴合面包屑本质：路径有严格顺序（首页 → 分类 → 当前页），且利于 SEO 结构化数据解析；<ul></ul> 更灵活，适合动态生成或含“返回上一级”等非标准节点的场景。
实操建议：
- 层级固定、线性明确（如文档站、电商类目页）→ 用
<ol></ol> - 路径可能跳级、含 JS 路由跳转逻辑、或末项仍可刷新当前页 → 用
<ul></ul>更稳妥 - 无论用哪个，都禁止用
<div> + <code>display: flex模拟列表 —— 键盘 Tab 焦点会乱，屏幕阅读器读不出顺序当前页必须用
aria-current="page"，不能靠禁用链接或文字标注只写“当前页”或给末项加
tabindex="-1"，辅助技术完全感知不到状态。主流读屏软件（NVDA / VoiceOver）只认aria-current="page"。常见错误：
- 末项写成
@#@#@#@#@#@#@#@#@#@0—— 点击会跳顶，且无语义 - 末项用
<span></span>替代链接 —— 失去可聚焦性，键盘用户无法操作 - 当前页仍需保持可点击（如刷新自身），此时应设
href指向当前 URL，并加aria-current="page"
CSS 分隔符必须用
::after，不能写死在 HTML 里把
/或>直接写进 HTML（如<li>首页</li> <li>/</li> <li>产品</li>），会导致屏幕阅读器逐字朗读“斜杠”，破坏路径语义。正确做法：
- 所有分隔逻辑交由 CSS 的
li::after实现，例如：content: "/"; - 末项用
li:last-child::after { content: ""; }清除多余符号 - 图标类分隔符（如箭头 SVG）必须配
aria-hidden="true"，避免干扰朗读
复杂点在于：语义结构和视觉样式要彻底解耦。很多人写对了 HTML 却在 CSS 里漏掉
last-child处理，结果末尾多出一个“/”，这个细节上线前务必检查。 - 末项写成
