面包屑导航符合规范兼容原则的落地方法

一、语义代码规范（SEO + 浏览器兼容）

1. 使用标准 HTML 语义标签
   采用 <nav aria-label="面包屑导航"> 包裹整体，内部用 <ol> 有序列表承载每一层级，<li> 包裹单项，不使用纯 div 堆砌，让浏览器、爬虫识别导航结构。
2. 引入面包屑结构化数据（Schema）
   添加 BreadcrumbList 结构化标记，搜索引擎可直接抓取层级路径，搜索结果展示路径锚点，兼容各大搜索引擎收录规则。
3. 链接地址真实有效
   每一级 a 标签指向对应分类页面，无空链接、死链接、跳转错误，全站路径与后台栏目架构一一对应。

二、无障碍 WCAG 规范（读屏设备、残障用户兼容）

1. 完善 ARIA 无障碍属性

• 外层 nav 添加 aria-label="页面位置导航"；
• 当前页面项添加 aria-current="page"，读屏软件自动识别当前位置；
• 分隔符不使用纯视觉符号，可搭配 aria-hidden="true" 避免读屏重复朗读箭头。

2. 色彩对比度达标
   文字与背景对比度≥4.5:1，浅灰弱文字禁止用于浅色背景，兼顾色弱、视力不佳用户识别。
3. 键盘操作兼容
   面包屑链接支持 Tab 键盘切换焦点，focus 状态有清晰高亮样式，仅靠键盘可完整操作跳转。

三、多终端响应式兼容（PC / 平板 / 手机）

1. 统一全局位置规则
   全站固定放在主导航下方、页面标题上方，不随意更换摆放位置，形成统一用户认知。
2. 超长层级折叠适配

• PC 端：层级过多时省略中间层级，显示「首页 ... 二级分类 当前页」；
• 移动端：自动收缩，只保留首页、上一级、当前页，防止文字横向溢出、挤压布局。

3. 尺寸自适应
   字号、内外边距跟随屏幕缩放，移动端加大链接点击热区，防止误触。

四、全站视觉规范统一（产品设计体系兼容）

1. 统一视觉组件规则
   全站固定一套分隔符（> //）、字号、色值、间距，不出现多个页面多种面包屑样式。
2. 样式轻量化兼容
   不使用复杂渐变、阴影、动效，低版本浏览器也能正常渲染，避免样式错乱、遮挡内容。

五、业务场景规则兼容

1. 区分页面是否需要面包屑
   首页、弹窗、单页落地页、二级以内浅层级页面不展示，统一业务判断逻辑，全站规则一致。
2. 不同页面类型逻辑统一
   资讯、商品、文档页面面包屑生成规则标准化，不出现同层级页面路径写法不一致的问题。

精简背诵版（答题专用）

1. 代码语义化，使用 nav、ol 标签，添加面包屑结构化数据，适配搜索引擎；
2. 遵循无障碍标准，配置 ARIA 属性、满足色彩对比度、支持键盘操作，兼容读屏设备；
3. 做响应式适配，PC 与移动端超长层级自动折叠，布局不溢出；
4. 全站视觉、摆放位置、交互样式统一，适配全页面设计体系；
5. 链接路径真实有效，页面展示规则统一，适配网站不同业务页面。