HTML面包屑导航怎么布局？层级路径搭建教程-html教程-PHP中文网

面包屑必须用包裹结构，当前页用标识，分隔符须由CSS伪元素生成并设aria-hidden="true"。

html面包屑导航怎么布局？层级路径搭建教程

面包屑必须用包裹并设 `aria-label="Breadcrumb"`

不加

容器，屏幕阅读器会把面包屑当普通文本读，用户完全感知不到这是导航路径；漏掉 aria-label="Breadcrumb"，部分读屏工具甚至不归类为“导航”类型。常见错法包括：

 替代 、写了  却没加 aria-label、或误写成 aria-labelledby（需额外绑定 ID，纯属多此一举）。静态页和 SPA 都适用这个结构，aria-label 值固定写死即可，无需随路由动态更新。

 是唯一推荐的内部容器，不是  也不是 
面包屑本质是严格顺序的层级路径：首页 → 分类 → 子分类 → 当前页。“先后”是语义本身，不是靠 CSS 视觉流模拟出来的。
 会被读屏器正确读出“第 1 项、第 2 项……”，而  表示无序集合，直接破坏路径逻辑。Lighthouse 会将  写法标红为“语义缺失”。
即使你用 list-style: none 隐藏了数字，
 的语义依然有效——辅助技术仍能识别层级深度。
常见错误：
 套文字加斜杠、 包链接、用 innerHTML 拼接字符串生成列表（破坏语义与可访问性）。当前页必须用  标识，且只能加在 
 上
这是 JAWS/NVDA/VoiceOver 唯一能正确识别为“当前位置”的方式。写成 class="active"、aria-disabled="true" 或 aria-current="true" 全部无效。
关键细节：

											
												
												
													HTML Text Extract
													从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。
												
												下载
												
											
										


aria-current="page" 必须加在当前页对应的 
 元素上，不是加在 、 或  根节点
当前页项不应是可点击链接，所以里面不要放 ；若保留（如某些 CMS 分类页），至少加 tabindex="-1" 和 aria-disabled="true"

值必须是 "page"，大小写敏感，不能是 "current" 或 "location"


分隔符必须用 CSS 伪元素生成，禁用 HTML 硬编码
把 / 或 > 直接写进 HTML，读屏器会连读成“首页斜杠产品斜杠当前页”，破坏语义连贯性。正确做法是用 ::before 或 ::after 生成，并加 aria-hidden="true" 隐藏其可访问性。
推荐写法：
nav ol li:not(:first-child)::before {
  content: "›";
  margin-left: 0.5em;
  aria-hidden: true;
}
注意点：

用 ›（U+203A）比 > 更轻量、视觉更协调
若需 RTL 支持，在  上加 dir="ltr"，防止分隔符被镜像
避免使用 !important，它会和 Bootstrap 等框架的 --bs-breadcrumb-divider 变量冲突

最易被忽略的是：纯静态 HTML 页面无法靠 window.location.pathname 自动推导真实业务层级——URL 路径和信息架构常常不一致。手写结构或构建时注入才是唯一可靠方式。