表格内操作菜单按钮适配辅助技术需添加哪些无障碍属性？

你之前的问题出在错误地给按钮添加了role=menu——这个属性是给菜单容器用的，不是按钮本身。下面是完整的属性配置和实现要点：

一、触发按钮的核心属性 #

按钮必须用原生<button>元素（不要用div模拟，原生按钮自带语义），再加上这些属性：

• aria-haspopup="true"：告知辅助技术，点击该按钮会弹出菜单组件
• aria-expanded="false"：初始状态为收起，菜单展开时改为true，需通过JS同步状态
• aria-label="操作菜单"：如果按钮是纯图标（无可见文本），必须加这个属性说明功能；如果有可见文本（比如“更多操作”），可省略但建议保留
• 给按钮设置唯一id（如id="table-row-menu-btn"），用于关联菜单容器

示例代码：

<button id="table-row-menu-btn" aria-haspopup="true" aria-expanded="false" aria-label="操作菜单">
  ⋮ <!-- 图标 -->
</button>

二、菜单容器的属性 #

菜单容器（比如<ul>或<div>）需要这些配置：

• role="menu"：标记这是一个菜单组件
• aria-labelledby="table-row-menu-btn"：关联触发按钮的id，让辅助技术明确菜单归属
• hidden：初始状态隐藏，菜单展开时移除该属性
• 可选：aria-modal="false"（表格内菜单不属于模态框，无需阻断其他内容）

示例代码：

<ul id="table-row-menu" role="menu" aria-labelledby="table-row-menu-btn" hidden>
  <!-- 菜单项 -->
</ul>

三、菜单项的属性 #

每个菜单项需要：

• role="menuitem"：标记这是菜单中的可选项
• 用<button>元素承载菜单项（或给非按钮元素加tabindex="-1"），确保键盘可交互
• 可选：aria-disabled="true"（如果菜单项不可用）

示例代码：

<li role="none"> <!-- 去掉列表默认语义，避免干扰菜单结构 -->
  <button role="menuitem">编辑</button>
</li>
<li role="none">
  <button role="menuitem" aria-disabled="true">删除（不可用）</button>
</li>

四、必须的键盘交互逻辑 #

辅助技术依赖键盘操作，必须实现：

1. 触发按钮：按回车/空格展开菜单，焦点自动移到第一个菜单项
2. 菜单内：按上/下箭头切换菜单项焦点，按回车/空格执行操作，按Esc关闭菜单并将焦点放回触发按钮
3. 菜单收起时：所有菜单项不可获焦

内容的提问来源于stack exchange，提问作者Soumya Sadan