欢迎来到雄杰鑫电商资讯网
技术教程

面包屑导航的正确语义化写法（nav + ol + aria-label）

舞夢輝影 次阅读
面包屑导航必须用包裹并设aria-label="Breadcrumb"，内部用表达层级顺序，上级页用链接，当前页用或标记。

面包屑导航的语义化核心是明确传达“当前位置在层级路径中的位置”，应使用

包裹，内部用有序列表
    表达层级顺序，并通过 aria-label="Breadcrumb" 标识其功能类型。

    必须用

    是 WAI-ARIA 推荐的导航区域容器，能被屏幕阅读器识别为独立导航模块。不能用 或
    替代，否则会丢失语义上下文。

    层级结构必须用
      ，不是

      面包屑反映的是有明确先后顺序的路径（首页 → 分类 → 子类 → 当前页），

        天然表达顺序关系，而
          表示无序集合，会误导辅助技术用户。每个
        • 代表一个层级节点。

          添加 aria-label="Breadcrumb"

          这是关键可访问性标记。仅靠

          不足以说明用途，加上 aria-label="Breadcrumb" 后，屏幕阅读器会播报“Breadcrumb navigation”

          或类似提示，帮助用户快速理解该区域作用。

          链接与当前页的写法要区分

          • 所有可点击的上级页面用 ，保留 href 属性（即使指向 JS 路由，也建议设为语义化路径如 /products/）
          • 当前页用 或 ，不加 href，避免被误认为可跳转
          • 不要用 aria-current="page" 替代视觉样式——它只是辅助标注，仍需配合合适的 HTML 元素

          正确示例：

          ai 电脑 html js 路由 笔记本电脑 子类

          • 相关文章

          按ESC键退出。