标签在html5中仅适用于右键上下文菜单，不可用于导航或工具栏；用作toolbar时无默认样式、无aria role映射、无键盘导航支持，应改用配合button和aria属性实现。

menu 标签在现代 HTML 中基本不可用

直接说结论：<menu></menu> 标签在 HTML5 中已被重新定义为“上下文菜单”（需配合 contextmenu 属性），**不是用来写普通导航或命令列表的**。你如果照着旧教程用它写工具栏、侧边栏或操作按钮，浏览器不会报错，但语义错误、无障碍支持差、CSS 默认样式极弱，且大多数屏幕阅读器会忽略其结构。

type="toolbar" 实际上没有浏览器支持

<menu type="toolbar"></menu> 在所有主流浏览器（Chrome、Firefox、Safari、Edge）中：

• 无默认样式 —— 渲染效果等同于未设样式的 <div>，连内边距和垂直对齐都得手写 <li>不映射任何 ARIA role —— 即使写了 <code>type="toolbar"，也不会自动添加 role="toolbar"
• 键盘焦点逻辑完全缺失 —— <button></button> 子元素可聚焦，但父 <menu></menu> 不参与 tab 顺序管理，Arrow 键导航需 JS 全手动实现
• 被 WAI-ARIA 指南明确列为「应避免」的模式，推荐改用 <div role="toolbar"> <h3>唯一合理使用场景：右键上下文菜单</h3> <p>真正能用上 <code><menu type="context"></menu> 的地方，只有配合 contextmenu 属性触发的右键菜单：
  

  Doc To HTML

  使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

  下载
  • 必须显式绑定：<div contextmenu="my-menu">右键试试</div>
  • <menu type="context" id="my-menu"></menu> 必须与 id 严格匹配
  • <menuitem></menuitem> 已被移出标准 —— Chrome/Firefox 实际只解析 label 和 onclick，其他属性（如 type="checkbox"）无效
  • 生产环境应放弃 <menuitem></menuitem>，改用 <div role="menu"><div role="menuitem">复制</div></div> + 手动处理焦点和键盘行为

  替代方案必须带 role 和可聚焦能力

  要实现可用的命令列表（比如编辑器顶部工具栏），不能只靠标签语义，必须满足以下三点：

  • 容器加 role="toolbar"（否则辅助技术无法识别用途）
  • 每个操作项用原生 <button></button> 或带 tabindex="0" 的元素 —— <span></span> 或 <div> 默认不可键盘聚焦 <li>显式声明快捷键提示：<code>aria-label="加粗 Ctrl+B"，而非依赖 <menuitem accelerator="Ctrl+B"></menuitem>（该属性无浏览器支持）
  • 禁用状态必须用 aria-disabled="true" + CSS 灰色样式 —— <menu></menu> 不支持 disabled 属性

  容易被忽略的是：哪怕你坚持用 <menu type="toolbar"></menu>，也得手动补全上述全部要点才勉强可用；而换成 <div role="toolbar">，语义清晰、兼容稳定、样式可控，还省去一堆 hack 补丁。</div>