面包屑组件示例

什么是面包屑导航？

面包屑导航是一种辅助导航系统，显示用户在网站层次结构中的当前位置。它帮助用户了解他们在网站中的位置，并提供返回上级页面的快速方式。

无障碍要求

• ARIA标签： 使用 aria-label="面包屑导航" 来标识导航类型
• 当前页面： 使用 aria-current="page" 标识当前页面
• 语义HTML： 使用 <nav> 和 <ol> 元素
• 键盘导航： 所有链接必须可通过键盘访问
• 屏幕阅读器： 提供清晰的上下文和位置信息

实施指南

面包屑导航应该：

• 始终包含返回首页的链接
• 显示完整的层次路径
• 当前页面不应该是链接
• 使用适当的分隔符（如 > 或 /）
• 在移动设备上保持响应式
• 与网站的整体设计保持一致

Schema.org结构化数据

面包屑导航应该包含Schema.org BreadcrumbList结构化数据，以改善搜索引擎理解和显示：

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "首页",
      "item": "https://hack23.com/index_zh.html"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "服务",
      "item": "https://hack23.com/services_zh.html"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "咨询",
      "item": "https://hack23.com/consulting_zh.html"
    }
  ]
}

WCAG 2.1 AA合规

我们的面包屑实施符合以下WCAG标准：

• 1.3.1 信息和关系： 使用语义HTML结构
• 2.4.4 链接目的（在上下文中）： 清晰的链接文本
• 2.4.8 位置： 提供位置信息
• 3.2.3 一致的导航： 在整个网站上保持一致
• 4.1.2 名称、角色、值： 正确的ARIA属性