面包屑导航不应直接用<nav>包裹，而应使用<ol>并为当前页链接添加aria-current="page"；分隔符需用aria-hidden="true"隐藏，确保键盘与屏幕阅读器可访问。
面包屑导航要不要用 <nav> 包裹
不用。面包屑不是主导航，<nav> 语义上专指网站级主要导航（如顶部菜单、侧边栏），而面包屑是辅助性路径提示。W3C 明确建议用 <ol> 或 <div> + ARIA 标记，更准确的是 <nav aria-label="Breadcrumb"> —— 这属于“可选但推荐”的折中方案：既保留语义，又不违背规范。
aria-current="page" 必须加在当前页链接上
这是屏幕阅读器识别“你现在在哪”的唯一可靠方式。漏掉它，视障用户会误以为最后一条仍是可点击的跳转项。
- 当前页不能是纯文本，必须是
<a>标签（哪怕 href="#"） - 必须显式写
aria-current="page"，不能只靠 CSS 类或 title 属性模拟 - 示例：
<a href="#" aria-current="page">项目详情</a>
用 <ol> 而不是 <ul> 的原因
面包屑是严格有序的层级路径（首页 → 分类 → 子类 → 当前页），<ol> 天然表达顺序关系，对辅助技术更友好，且默认带数字序号（可用 CSS list-style: none 隐藏）。
<ol class="breadcrumb"> <li><a href="/">首页</a></li> <li><a href="/projects">项目</a></li> <li><a href="#" aria-current="page">个人页面</a></li> </ol>
CSS 样式里最容易忽略的可访问性细节
仅用「/」或「›」做分隔符不够：它们不是语义分隔，也不能被屏幕阅读器自然朗读。正确做法是用 aria-hidden="true" 隐藏视觉符号，并确保链接本身有足够对比度（≥4.5:1）和点击热区（最小 44×44px）。
立即学习“前端免费学习笔记（深入）”；
- 分隔符应写成：
<span aria-hidden="true">/</span> - 避免用 background-image 模拟箭头——它无法缩放，也不随系统字体设置变化
- 移动端记得加
touch-action: manipulation防止 300ms 点击延迟
aria-current 或用了不可见的 SVG 分隔符，结果对辅助技术完全失效。 
