应该用包裹，但必须加aria-label="当前位置"或aria-labelledby，否则屏幕阅读器仅读“导航”而无法识别其路径指示功能；w3c明确面包屑属辅助导航，需独立且不可嵌套于其他内。
面包屑该不该用
应该用，但必须加 aria-label="当前位置" 或 aria-labelledby，否则屏幕阅读器只会读“导航”，完全不知道这是路径指示器。W3C 明确说面包屑属于辅助导航，<nav></nav> 合法，但语义上不能和主导航混为一谈。
常见错误现象：<nav><ol class="breadcrumb">...</ol></nav> 没加 ARIA 标识 → axe 工具报 landmark-no-label；或把面包屑塞进主导航的 <nav aria-label="主导航"></nav> 里 → 辅助技术误判层级。
- 面包屑必须独立成一个
<nav></nav>，不能嵌套在另一个<nav></nav>内部 - 优先用
<ol></ol>（有序列表），因为路径有明确先后顺序，<ul></ul>会丢失语义强度 - 每个
<li>里的链接应指向对应层级页面，末尾项（当前页）不用<a></a>，避免跳转 - 不要给面包屑加
role="navigation"：现代浏览器已原生支持<nav></nav>的 landmark 识别，重复加 role 可能干扰读屏逻辑
<nav></nav> 能不能嵌套另一个 <nav></nav>？
不能。嵌套会破坏 landmark 结构，导致键盘用户（如按 NVDA+Insert+N）无法准确跳转到目标导航区，自动化无障碍测试也会报 landmark-is-unique 错误。
使用场景里常被误用的是“多级下拉菜单”——看起来是导航套导航，实际语义结构是单层 <nav></nav> + 多层 <ul></ul> 嵌套：
<nav aria-label="主导航"><ul>
<li>
<a href="/products">产品</a>
<ul>
<li><a href="/products/web">Web 端</a></li>
</ul>
</li>
</ul></nav>
-
<nav></nav>只能出现在文档层级（document-level），不是容器级；它代表一个可被全局定位的导航区域 - 视觉上的“二级菜单”是 CSS 和 JS 控制的显示/隐藏，语义上仍是同一组导航意图的展开，不构成新 landmark
- 如果侧边栏真有另一套独立导航（比如“管理后台快捷入口”），那就另起一个
<nav aria-label="管理面板"></nav>，平级放置，而非嵌套
面包屑用 <nav></nav> 后，CSS 怎么不影响语义？
CSS 不影响语义，但会影响可访问性表现。比如用 display: flex 替换 <ol></ol> 默认样式没问题，但若用 float 或绝对定位打乱 DOM 顺序，读屏器仍按源码顺序朗读，用户听到的路径就错乱了。
- 保持
<ol></ol>的嵌套结构完整，不要用order属性反转<li>渲染顺序 - 分隔符（如
/或>）别写死在 HTML 里，用::after伪元素生成，否则读屏器会连读“首页 / 产品 / 当前页”变成“首页斜杠产品斜杠当前页” - 当前页项（非链接）加
aria-current="page"，这是关键信号，读屏器会特别提示“当前位置” - 移动端折叠时，别用
visibility: hidden或opacity: 0隐藏整段面包屑——得用display: none或aria-hidden="true"配合媒体查询，否则它仍在可访问树中
为什么很多人写了 <nav></nav> 却没效果？
因为 <nav></nav> 本身不提供任何样式、焦点管理或交互逻辑，它只是个语义信标。你看到“没效果”，其实是没配 CSS 或没补 ARIA，而不是标签失效。
- 纯
<nav><a>首页</a><a>产品</a></nav>在浏览器里就是一行普通文本，没有任何导航栏外观 - 没加
aria-label的<nav></nav>在 Chrome DevTools 的 Accessibility 面板里会显示 “No label” —— 这是第一个该查的地方 - 服务端渲染（如 Next.js）漏掉
<nav></nav>，会导致 axe 报landmark-no-duplicate-main类警告，不是样式问题，是结构缺失 - 最隐蔽的坑：用构建工具自动移除空标签（如
html-minifier的removeEmptyElements），结果把只有 ARIA 属性、无可见内容的<nav aria-label="面包屑"></nav>给删了
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
