不能用 <toolbar> 标签，因其非HTML标准元素，会导致DOM异常、CSS/JS适配困难、屏幕阅读器无法识别且违反WCAG 4.1.2；应使用<div role="toolbar">并必须配合aria-label或aria-labelledby提供可访问名称，子元素限于可聚焦控件，需手动管理焦点、键盘导航与状态同步。
为什么不能用 <toolbar> 标签
浏览器根本不识别 <toolbar>，它不是 HTML 标准元素。硬写进去会导致 DOM 中生成无意义的自定义标签，CSS 选择器必须额外声明，JS 查询得用 document.getElementsByTagName('toolbar') 这类不稳定写法。更关键的是：屏幕阅读器完全无法识别其用途，WCAG 4.1.2 直接报错“缺少可访问名称”。所有现代框架（React/Vue/Svelte）在 SSR 或 hydration 时会忽略或警告该标签，后续 focus 管理、键盘导航全失效。
div[role="toolbar"] 必须配 aria-label 或 aria-labelledby
只加 role="toolbar" 是无效的。ARIA 规范强制要求每个 role="toolbar" 元素必须有可访问名称，否则会被辅助技术跳过。
- 正确写法：
<div role="toolbar" aria-label="代码编辑器操作栏"> - 如果有可见标题，比如
<h2 id="toolbar-title">格式工具</h2>，就用aria-labelledby="toolbar-title" - 错误写法：
<div role="toolbar">（缺失名称）、<div role="toolbar" aria-label="">（空字符串也不行）
工具栏子元素只能是可聚焦控件，且需手动补全焦点逻辑
role="toolbar" 的语义是“一组快捷操作控件”，不是导航结构。混用会导致焦点流错乱、键盘方向键行为异常。
- 允许的子元素：
<button>、<input type="checkbox">、<select>、<input type="range"> - 禁止的子元素：
<a>（这是导航，该归<nav>）、<div onclick="">（不可聚焦、无键盘支持） - 嵌套
role="toolbar"是明确禁止的——旧版 NVDA 会跳过整个区域，JAWS 可能读作“空白工具栏” - 给容器加
tabindex="0"，确保能被 Tab 进入（但别加tabindex="1"之类的手动序号） - 首次渲染后调用
toolbarElement.focus()，否则键盘用户第一次 Tab 就跳过整个区域 - 如果是分组按钮（如字体加粗/斜体/下划线），需监听
keydown实现 →/← 切换，不能只靠浏览器默认 - CSS 必须提供
:focus-visible样式，否则键盘用户的焦点位置不可见
真正难的不是排按钮，而是让每个按钮在不同输入方式下行为一致
鼠标点击、触屏 tap、键盘 Tab + Space/Enter、屏幕阅读器朗读 —— 这五种路径必须收敛到同一套状态响应逻辑。漏掉任意一环，比如没监听 keyup 时的 Space、没同步 aria-pressed、没处理 disabled 时的 aria-disabled="true"，就会导致某类用户完全无法感知或操作该控件。这不是样式问题，是交互契约的断裂。
立即学习“前端免费学习笔记（深入）”；
