如何用HTML nav标签嵌套实现长尾词面包屑导航效果？

本文共计1215个文字，预计阅读时间需要5分钟。

应该使用，但必须加上 `` 标签，并设置 `aria-label` 属性。

常见错误现象：<nav><ol class="breadcrumb">...</ol></nav> 没加 ARIA 标识 → axe 工具报 landmark-no-label；或把面包屑塞进主导航的 <nav aria-label="主导航"> 里 → 辅助技术误判层级。

• 面包屑必须独立成一个 <nav>，不能嵌套在另一个 <nav> 内部
• 优先用 <ol>（有序列表），因为路径有明确先后顺序，<ul> 会丢失语义强度
• 每个 <li> 里的链接应指向对应层级页面，末尾项（当前页）不用 <a>，避免跳转
• 不要给面包屑加 role="navigation"：现代浏览器已原生支持 <nav> 的 landmark 识别，重复加 role 可能干扰读屏逻辑

<nav> 能不能嵌套另一个 <nav>？

不能。嵌套会破坏 landmark 结构，导致键盘用户（如按 NVDA+Insert+N）无法准确跳转到目标导航区，自动化无障碍测试也会报 landmark-is-unique 错误。