屏幕阅读器无障碍：两个按钮共用一个标签的实现方案咨询

1. 给按钮添加aria-label的方案完全可行 #

这种方案是最直接且风险最低的选择，不需要改动现有DOM结构，只需要给每个按钮补充aria-label属性，把<span>的文本和按钮自身文本组合起来，比如：

<button aria-pressed="false" aria-label="Labeltext Filter 1">Filter 1</button>
<button aria-pressed="true" aria-label="Labeltext Filter 2">Filter 2</button>

核心优势：

• 完全保留原有视觉布局和交互逻辑，不会引入额外样式或结构变动
• 屏幕阅读器会直接读取aria-label的完整文本，让用户清晰理解按钮的作用（相当于把视觉上的共同标签和按钮文本整合为一个完整的无障碍标签）
• 符合WCAG无障碍标准，确保视觉和听觉用户获取的信息一致

需要注意：aria-label的文本必须和视觉呈现的内容严格对应，不能出现描述与实际按钮功能不符的情况。

2. 采用Checkbox Pattern的方案不推荐 #

把<span>转为标题的做法存在明显的无障碍问题：

• 孤立的标题会打乱屏幕阅读器的页面结构导航逻辑，用户原本可以通过标题层级快速定位内容，突然出现一个无上下文的标题，反而会造成困惑
• 该方案需要修改元素类型（比如把按钮改为带role="checkbox"的元素），增加不必要的开发成本，还可能破坏原有交互（比如按钮的默认键盘事件）
• 你的场景里按钮已经使用了aria-pressed，本身就符合切换按钮的无障碍语义，完全没必要替换为复选框模式

最终结论 #

优先选择添加aria-label的方案，既满足无障碍要求，又不会引入额外的结构或交互问题。

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