标签不适合做工具栏，因其语义模糊、浏览器渲染不可控、无障碍支持差；应改用+或带role="toolbar"的，并确保键盘导航与屏幕阅读器兼容。

<menu></menu> 标签在现代 Web 应用中基本不用于工具栏，浏览器默认渲染不可控、语义模糊、无障碍支持差，**不要用它写工具栏或导航菜单**。

为什么 <menu></menu> 不适合做工具栏

HTML5 规范里 <menu></menu> 本意是表示“命令菜单”（如右键菜单、应用内操作集），但实际被所有主流浏览器忽略语义，统一渲染成无样式 <ul></ul>，且不支持键盘焦点、role 自动绑定、屏幕阅读器识别也不一致。Chrome 和 Firefox 甚至已移除对 type="toolbar" 的任何特殊处理。

• 你写 <menu type="toolbar"></menu>，浏览器照样当普通块元素渲染，无默认 flex 布局、无 hover/focus 样式
• 无法通过 tab 键顺序访问内部 <menuitem></menuitem>（该标签已被废弃，HTML5.2 起彻底删除）
• W3C 明确建议：工具栏应使用 <nav></nav> + <ul></ul> 或带 role="toolbar" 的 <div> <h3>替代方案：用 <code><nav></nav> + <ul></ul> 实现可访问工具栏

  这是当前最稳妥、语义清晰、支持键盘导航和屏幕阅读器的写法。关键不是标签名，而是结构 + 属性 + CSS 行为协同。

  

  HTML Text Extract

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

  下载
  • 外层用 <nav aria-label="主工具栏"></nav>，明确区域用途
  • 内部用 <ul role="toolbar"></ul>（role="toolbar" 是 ARIA 补充语义，非必需但推荐）
  • 每个按钮用 <li><button type="button">保存</button></li>，不用 <a></a>（除非真跳转）
  • 确保 button 有 aria-label 或可见文字，图标按钮必须配文字或 aria-label

  <nav aria-label="文档编辑工具栏"><ul role="toolbar">
  <li><button type="button" aria-label="加粗"><strong>B</strong></button></li>
      <li><button type="button" aria-label="插入图片">?</button></li>
    </ul></nav>

  如果非要兼容旧代码里的 <menu></menu>，怎么最小化风险

  极少数遗留系统还在用，此时不能直接删，但必须补足缺失能力：

  • 强制重置样式：menu { display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
  • 手动添加键盘支持：给每个子元素加 tabindex="0"，监听 keydown 处理 Enter/Space
  • 补 role：<menu role="toolbar"></menu> + 子项 <button role="menuitem"></button>（注意：这不是标准 <menu></menu> 语义，只是权宜之计）
  • 测试时重点检查：NVDA/JAWS 下是否播报“工具栏”，Tab 是否能进入、Arrow 是否能切换

  真正难的不是写出工具栏 DOM，而是让每个按钮在键盘、屏幕阅读器、高对比度模式下行为一致。用 <menu></menu> 省下的那几行代码，后期要花十倍精力去修可访问性漏洞。