按钮分组-ARIA技术问询：如何实现屏幕阅读器播报分组及聚焦序号

要让屏幕阅读器正确播报按钮的分组归属和当前位置，同时不修改按钮的aria-label与role属性，你可以通过添加ARIA集合属性和分组角色来实现：

1. 给外层容器添加role="group"，明确这是一个关联控件组；可选添加aria-label补充分组名称，让播报信息更完整
2. 给每个按钮添加aria-setsize（指定分组内总按钮数）和aria-posinset（指定当前按钮在分组中的位置）

调整后的代码如下（同时修复了原代码中重复的id问题）：

<div id="flxButtons" role="group" aria-label="操作按钮组">
  <div id="wrapper-cancel">
    <input id="btnCancel" type="button" role="button" value="CANCEL" aria-setsize="3" aria-posinset="1">
  </div>
  <div id="wrapper-modify">
    <input id="btnModify" type="button" role="button" value="MODIFY" aria-setsize="3" aria-posinset="2">
  </div>
  <div id="wrapper-next">
    <input id="btnNext" type="button" role="button" value="NEXT" aria-setsize="3" aria-posinset="3">
  </div>
</div>

实际播报效果 #

• 焦点落在「CANCEL」按钮时，屏幕阅读器会播报：CANCEL 按钮，3个中的第1个，操作按钮组（不同阅读器表述略有差异，但核心信息一致）
• 若不需要分组名称，移除容器的aria-label即可，此时播报内容简化为「CANCEL 按钮，3个中的第1个」，完全符合你的需求

关键提示 #

• 务必保证DOM元素id的唯一性，原代码中重复的wrapper id会导致潜在的JS或样式冲突，建议按示例修改
• 如果后续分组内按钮数量变化，需要同步更新所有按钮的aria-setsize值，确保信息准确

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