html没有原生元素，必须用配合aria-label或aria-labelledby实现；子元素仅限可交互控件，需手动处理焦点、键盘导航及:focus-visible样式。

HTML 没有 <toolbar></toolbar> 原生元素，所谓“自定义工具栏”本质是用标准容器 + ARIA 语义 + 可交互控件组合实现的——直接写 <toolbar></toolbar> 标签不仅无效，还会破坏可访问性。

为什么不能用 <toolbar></toolbar> 标签

浏览器根本不识别 <toolbar></toolbar>，它不是 HTML 标准元素。硬写进去会导致：

• DOM 中变成无意义的自定义标签，CSS 选择器需额外声明，JS 查询得用 document.getElementsByTagName('toolbar') 这类不稳定的写法
• 屏幕阅读器完全无法识别其用途，WCAG 4.1.2 直接报错“缺少可访问名称”
• 所有现代框架（React/Vue/Svelte）在 SSR 或 hydration 时会忽略或警告该标签，后续 focus 管理、键盘导航全失效

<div role="toolbar"> 必须配 <code>aria-label 或 aria-labelledby

只加 role="toolbar" 是无效的。ARIA 规范强制要求每个 role="toolbar" 元素必须有可访问名称，否则会被辅助技术跳过。

Pptx To Html

使用 MinerU 将 PowerPoint (.pptx) 演示文稿转换为 HTML，保留幻灯片内容与结构，生成可直接在网页使用的 HTML格式。

下载

• 正确写法：<div role="toolbar" aria-label="代码编辑器操作栏"> <li>如果有可见标题，比如 <code><h2 id="toolbar-title">格式工具</h2>，就用 aria-labelledby="toolbar-title"
• 错误写法：<div role="toolbar">（缺失名称）、<code><div role="toolbar" aria-label="">（空字符串也不行） <h3>工具栏里只能放可交互控件，别塞导航链接</h3> <p><code>role="toolbar" 的语义是“一组快捷操作控件”，不是导航结构。混用会导致焦点流错乱、键盘方向键行为异常。
  • 允许的子元素：<button></button>、<input type="checkbox">、<select></select>、<input type="range">
  • 禁止的子元素：<a href="/home"></a>（这是导航，该归 <nav></nav>）、<div onclick="...">（不可聚焦、无键盘支持） <li>嵌套 <code>role="toolbar" 是明确禁止的——旧版 NVDA 会跳过整个区域，JAWS 可能读作“空白工具栏”

  focus 和 keyboard 行为必须手动补全

  即使 DOM 结构和 ARIA 都对了，如果没处理焦点逻辑，用户用 Tab 键进不来、用空格触发不了、方向键切不了按钮，工具栏就是摆设。

  • 给容器加 tabindex="0"，确保能被 Tab 进入（但别加 tabindex="1" 之类的手动序号）
  • 首次渲染后调用 toolbarElement.focus()，否则键盘用户第一次 Tab 就跳过整个区域
  • 如果是分组按钮（如字体加粗/斜体/下划线），需监听 keydown 实现 →/← 切换，不能只靠浏览器默认
  • CSS 必须提供 :focus-visible 样式，否则键盘用户的焦点位置不可见

  真正难的不是把按钮排成一行，而是让每个按钮在键盘、屏幕阅读器、触屏、鼠标下行为一致。漏掉 aria-label 或忘记 tabindex="0"，工具栏就只剩视觉效果了。