面包屑导航的语义化与 ARIA 增强完整写法

冷炫風刃 2026-01-18 00:00:00 次阅读

面包屑导航必须用包裹，内部用或结构，当前页用 aria-current="page" 标识，分隔符通过 CSS 实现，图标需配 visually-hidden 文本确保可访问性。

面包屑导航应当用

包裹，并通过 aria-label="Breadcrumb" 明确其作用；内部结构推荐使用无序列表（），每项为

，当前页用 aria-current="page" 标识，而非仅靠视觉样式区分。

语义化结构：用 nav + ol/ul 而非 div 堆砌

面包屑本质是导航性组件，必须包裹在

中，并添加 aria-label="Breadcrumb"。虽然规范允许用（强调顺序）或（更常见、更灵活），但禁止直接用一连串

 或  拼接。
用  时，每个 
 代表路径中一个明确层级，适合严格线性路径（如首页 → 分类 → 子类 → 当前页）
用  更通用，兼容动态生成、跳转逻辑复杂或存在“返回上一级”等非标准节点的场景
分隔符（如 / 或 >）应放在 CSS 中实现（如 ::after），不可写死在 HTML 里，避免干扰屏幕阅读器朗读

ARIA 增强：精准表达当前位置与导航意图
仅靠文字“当前页”或禁用链接无法让辅助技术理解状态。必须用 aria-current="page" 标注当前项，这是 WCAG 2.1 推荐做法，被主流屏幕阅读器（NVDA、VoiceOver、JAWS）原生支持。

不要用 aria-disabled="true" 或 tabindex="-1" 替代 aria-current，它们不传达语义，只影响焦点
若当前页仍可点击（如刷新自身），仍需保留 aria-current="page"，并确保链接 href 指向自身 URL（避免空 href 或 #）
所有链接（包括当前页）都应有可访问的文本内容，避免仅用图标（如 home.svg）而无 aria-label 或 首页


视觉隐藏与可访问文本的平衡写法
很多设计要求图标代替文字（如首页用?），或用极简符号（如 >）。此时必须补充不可见但可读的文本，确保信息不丢失。

首页图标旁加 首页，配合 CSS 隐藏但保留在读取流中
分隔符用 
/，既不朗读也不聚焦
避免 display: none 或 visibility: hidden 隐藏关键文本——它们会彻底移除可访问性树中的节点

完整可复制示例（含注释）

  
    
      
        首页
        
      
    
    /
    商品
    /
    电子产品
    /
    无线耳机
  

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}