面包屑导航必须用 包裹，内部用 或 结构，当前页用 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 或 首页

视觉隐藏与可访问文本的平衡写法

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

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

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

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

<nav aria-label="Breadcrumb"><ul>
<li>
      <a href="/" aria-label="首页">
        <span class="visually-hidden">首页</span>
        <svg aria-hidden="true" focusable="false">...</svg></a>
    </li>
    <li aria-hidden="true"><span aria-hidden="true">/</span></li>
    <li><a href="/products">商品</a></li>
    <li aria-hidden="true"><span aria-hidden="true">/</span></li>
    <li><a href="/products/electronics">电子产品</a></li>
    <li aria-hidden="true"><span aria-hidden="true">/</span></li>
    <li aria-current="page">无线耳机</li>
  </ul></nav>

.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;
}