面包屑导航必须用<nav>包裹并设aria-label="Breadcrumb"，内部用<ol>表达层级顺序，上级页用链接，当前页用或<span>标记。
面包屑导航的语义化核心是明确传达“当前位置在层级路径中的位置”，应使用 <nav> 包裹，内部用有序列表 <ol> 表达层级顺序，并通过 aria-label="Breadcrumb" 标识其功能类型。
必须用 <nav> 包裹
<nav> 是 WAI-ARIA 推荐的导航区域容器，能被屏幕阅读器识别为独立导航模块。不能用 <div> 或 <section> 替代，否则会丢失语义上下文。
层级结构必须用 <ol>，不是 <ul>
面包屑反映的是有明确先后顺序的路径（首页 → 分类 → 子类 → 当前页），<ol> 天然表达顺序关系，而 <ul> 表示无序集合，会误导辅助技术用户。每个 <li> 代表一个层级节点。
添加 aria-label="Breadcrumb"
这是关键可访问性标记。仅靠 <nav> 不足以说明用途，加上 aria-label="Breadcrumb" 后，屏幕阅读器会播报“Breadcrumb navigation”或类似提示，帮助用户快速理解该区域作用。
链接与当前页的写法要区分
- 所有可点击的上级页面用
<a href>，保留href属性（即使指向 JS 路由，也建议设为语义化路径如/products/） - 当前页用
<span>或<strong>，不加href，避免被误认为可跳转 - 不要用
aria-current="page"替代视觉样式——它只是辅助标注，仍需配合合适的 HTML 元素
正确示例：
<nav aria-label="Breadcrumb"><ol>
<li><a href="/">首页</a></li>
<li><a href="/products/">商品</a></li>
<li><strong>笔记本电脑</strong></li>
</ol>
</nav>
