面包屑导航必须用包裹并配合语义化结构，内部推荐使用，当前页用aria-current="page"标记，分隔符用css伪元素实现，响应式隐藏需用aria-hidden="true"而非display:none，框架中应动态绑定路由避免硬编码。
面包屑导航用 nav 包裹才语义正确
很多开发者直接用 div 或 ul 套一串链接，但屏幕阅读器和搜索引擎更依赖语义化结构。nav 是明确的导航容器，配合 aria-label="Breadcrumb" 能让辅助技术准确识别用途。不加 nav 不影响显示，但会影响可访问性和 SEO 权重分配。
实操建议：
- 外层必须用
<nav aria-label="Breadcrumb"></nav>，不能省略aria-label - 内部推荐用
ol（有序列表），因为路径有明确层级顺序，li的序号对部分辅助工具仍有意义 - 当前页用
aria-current="page"标记，比单纯加class="active"更可靠
li 之间用 / 分隔时，别用纯文本写死
把斜杠写在 HTML 里（如 <li>首页</li>
<li>/</li>）会导致复制粘贴混乱、缩放时换行错位、翻译时难以处理。CSS 伪元素才是可控方案。
实操建议：
- 每个
li后添加::after生成分隔符：nav ol li:not(:last-child)::after { content: "/"; margin: 0 0.5em; } - 用
not(:last-child)确保末尾不出现多余斜杠，避免手动删减 - 如果设计要求用 » 或 ›，直接改
content值即可，无需改 HTML
响应式断点下隐藏中间层级要谨慎
小屏设备常把多级面包屑折叠成“首页 / … / 当前页”，但直接用 display: none 会破坏辅助技术读取路径完整性。用户可能需要回溯中间节点，尤其在表单或多步骤流程中。
实操建议：
- 优先用
aria-hidden="true"隐藏视觉上的中间项，同时保留在 DOM 中供读屏器读取 - 若必须移除，应在 JS 中动态生成精简版，并同步更新
aria-label值，例如从"Home / Category / Subcategory / Product"改为"Home / ... / Product" - 测试时用 VoiceOver 或 NVDA 检查折叠后是否仍能获取完整路径信息
Vue/React 项目里别在模板里硬编码路径
服务端渲染或静态站点生成时，硬写 @#@#@#@#@#@#@#@#@#@0 容易和路由配置脱节，尤其当使用动态路由（如 /product/:id）或 i18n 多语言路径时，维护成本高且易出错。
实操建议：
- Vue 中用
<router-link></router-link>替代a，并绑定:to动态路径；React 中用<link>并确保to值来自路由对象 - 从路由元信息（
route.meta.breadcrumb）提取文案，而非在组件内写死 - 当前页文案不要从 URL 解析，而是取自
route.meta.title或页面组件自身的data属性，避免大小写、空格、编码问题
aria-current 和 aria-hidden 的组合使用，稍不注意就让整个导航对残障用户失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
