面包屑必须用 包裹并添加 aria-label="breadcrumb"，路径项用 包裹，当前页用 标记，分隔符应通过 css 伪元素实现，避免使用文字或背景图。
面包屑必须用 <nav></nav> 包裹，否则语义失效
屏幕阅读器和搜索引擎靠 <nav></nav> 识别这是导航区域，光用 <div> 或 <code><ol></ol> 套着“首页 > 分类 > 文章”没用。W3C 明确要求面包屑属于辅助导航，必须用 <nav></nav>，且建议加 aria-label="Breadcrumb"。
- 错误写法：
<div class="breadcrumb"> <a href="/">首页</a> > <a href="/cat">分类</a> </div> - 正确写法：
<nav aria-label="Breadcrumb"><ol> <li><a href="/">首页</a></li> <li><a href="/cat">分类</a></li> </ol></nav> -
<ol></ol>比<ul></ul>更合适——路径有明确顺序，序号本身不显示，但语义更强
aria-current="page" 是当前页的唯一合法标记方式
很多人用 class="active" 或 aria-disabled="true" 标当前页，这些对无障碍完全无效。只有 aria-current="page" 能让读屏软件明确告知用户“这是你当前所在位置”。
- 当前页项必须是
<li>内的最后一个<span></span>（不能是<a></a>） - 示例：
<li><span aria-current="page">JavaScript 入门</span></li> - 别写
aria-current="true"或aria-current="location"——前者非法，后者语义不符
CSS 隐藏分隔符比用文字更可靠
用 > 或 / 当分隔符看似简单，但会干扰读屏、缩放时错位、RTL（从右向左）布局下翻转。CSS 伪元素才是标准解法。
- 推荐写法：
ol.breadcrumb li:not(:last-child)::after { content: "›"; margin: 0 0.5em; } - 分隔符用
›（U+203A）比>更符合排版惯例，视觉上更轻 - 如果要支持 RTL，加
direction: ltr;在<nav></nav>上，避免分隔符被镜像 - 千万别用
background-image画箭头——高对比度模式下可能消失
动态生成面包屑时，document.title 不能直接当最后一级文本
页面标题常含品牌词、分隔符或 SEO 堆砌（如“JS 教程 | 前端网 | 2024 最新”），直接塞进面包屑会破坏路径清晰度。
立即学习“前端免费学习笔记（深入）”；
- 应从路由或数据层取真实内容名，比如 Vue Router 的
to.matched[to.matched.length - 1].meta.title - React Router 可在
useMatches()后过滤掉 layout route，取最后一个非 layout 的handle?.crumb - 服务端渲染时，模板需单独传入
crumbTitle字段，而非复用title - 空值或过长（>20 字）必须截断并加
title属性，否则 hover 无提示、读屏读不全
实际项目里最容易漏的是 aria-current 和 <nav></nav> 的组合；一旦缺一个，整个面包屑对残障用户就等于不存在。路径层级超过 4 级时，还得考虑是否该折叠中间项——但那是交互逻辑的事了，HTML 结构本身只管把语义钉死。
