面包屑导航必须用包裹并设aria-label="Breadcrumb",内部用表达层级顺序,上级页用链接,当前页用或标记。

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










