必须用包裹，因无导航语义、表无序集合，而面包屑是严格线性层级路径，仅能表达顺序并被读屏器识别为“第1项、第2项…”，容器和aria-label缺一不可。

必须用

包裹

，否则屏幕阅读器读不出导航语义，搜索引擎也识别不了路径结构。

面包屑的 HTML 结构为什么不能用

或

用

看起来能显示文字和斜杠，但辅助技术只会把它当普通段落读；用

则暗示“无序集合”，而面包屑本质是严格线性路径（首页 → 分类 → 当前页），

才能被读屏器识别为“第1项、第2项…”。

• 是唯一被 WCAG 和 Lighthouse 认可的导航容器，漏掉 aria-label="Breadcrumb" 会导致部分读屏器跳过整个区域
• 末项必须是
• 当前页
，不是 ，也不是加 class="active"
• 所有链接 href 必须是绝对路径（如 /blog/），避免子目录下相对路径错乱（./index.html 在 /docs/ 下会指向 /docs/index.html）

分隔符为什么不能直接写 / 或 > 在 HTML 里

把分隔符硬写进 HTML（比如

首页

/

博客

）会让读屏器连读成“首页斜杠博客”，破坏语义，也增加翻译和 RTL 支持难度。

• 正确做法：用 li:not(:last-child)::after 伪元素生成，例如 content: "›"; aria-hidden="true"
• 第一个
• 不需要前置分隔符，所以要用 :not(:first-child) 或 :not(:last-child) 精确控制
• 别用 font-awesome 图标类或 SVG 直接插入——它们可能被聚焦、被朗读，或在高对比度模式下不可见

静态 HTML 页面怎么生成真实层级，而不是瞎拆 window.location.pathname

纯 index.html 没有后端，但也不能靠 location.pathname.split('/') 自动推导。URL 路径不等于业务层级（比如 /blog/2024/09/breadcrumb.html 并不意味着“博客 > 2024 > 09 > 面包屑”）。

HTML Text Extract

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

下载

• 手写最稳妥：每个页面单独维护
  内容，适合页面数少、结构稳定的站点
• 构建时注入：用 Hugo/Jekyll 的 front matter 或 Vite 的 import.meta.env 注入预定义的面包屑数组，如 breadcrumb: [{text: "首页", href: "/"}, {text: "文档", href: "/docs/"}, {text: "面包屑", href: null}]
• JS 动态生成唯一可行路径：提前配好映射表，例如 { "/docs/breadcrumb.html": ["首页", "文档", "面包屑"] }，再根据 location.pathname 查表，而不是正则替换或字符串截取

移动端和可访问性最容易被忽略的三个点

响应式不是只调字号，可访问性也不只是加个 aria-current。这三个点上线前常被跳过，但一测就挂：

• 上必须加 dir="ltr"，否则 RTL 语言（如阿拉伯语）下伪元素分隔符会被镜像，变成 ← 而不是 →
• 小屏建议用 CSS 控制可见层级（如只留首项 + … + 当前页），而不是 white-space: nowrap 加横向滚动——滚动容器对键盘用户不友好，且 iOS VoiceOver 不稳定支持
• 每个 的点击区域必须 ≥ 44×44px，靠 padding 实现，别只依赖文字大小；aria-current="page" 的
• 也要有足够内边距，否则焦点框被裁切

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！