面包屑必须用<nav aria-label="Breadcrumb">包裹，禁用<div>或复用其他<nav>；优先<ol>表线性路径，当前页必用aria-current="page"；分隔符须CSS伪元素实现且末项清除。
面包屑必须用 <nav> 包裹并设 aria-label="Breadcrumb"
不加 <nav> 或只用 <div> 套链接，等于放弃语义和可访问性。屏幕阅读器无法识别这是导航路径，SEO 也收不到结构化信号。
关键点：
-
<nav aria-label="Breadcrumb">是最低要求，不能省略aria-label；写成aria-label=""或留空等同于没写 - 不要复用已有
<nav>（比如把面包屑塞进主导航的<nav>里），每个导航区域需独立语义上下文 - 如果页面已有主导航用了
<nav aria-label="主导航">，面包屑就必须另起一个<nav aria-label="Breadcrumb">
内部用 <ol> 还是 <ul>？优先选 <ol>，但 <ul> 也可接受
<ol> 更贴合面包屑本质：路径有严格顺序（首页 → 分类 → 当前页），且利于 SEO 结构化数据解析；<ul> 更灵活，适合动态生成或含“返回上一级”等非标准节点的场景。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 层级固定、线性明确（如文档站、电商类目页）→ 用
<ol> - 路径可能跳级、含 JS 路由跳转逻辑、或末项仍可刷新当前页 → 用
<ul>更稳妥 - 无论用哪个，都禁止用
<div>+display: flex模拟列表 —— 键盘 Tab 焦点会乱，屏幕阅读器读不出顺序
当前页必须用 aria-current="page"，不能靠禁用链接或文字标注
只写“当前页”或给末项加 tabindex="-1"，辅助技术完全感知不到状态。主流读屏软件（NVDA / VoiceOver）只认 aria-current="page"。
常见错误：
- 末项写成
<a href="#">当前页</a>—— 点击会跳顶，且无语义 - 末项用
<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 处理，结果末尾多出一个“/”，这个细节上线前务必检查。
