可访问的引导按钮组答案

【问题标题】：Accessible Bootstrap button groups可访问的引导按钮组
【发布时间】：2014-08-23 23:09:25
【问题描述】：

我正在使用引导按钮组，我希望它们可以访问。现在屏幕阅读器将它们视为单独的按钮。我希望屏幕阅读器将它们视为一组或一组按钮。

http://getbootstrap.com/components/#btn-groups

<div class="btn-group">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

我还希望屏幕阅读器知道选择了哪个按钮，但使用 aria-checked 标记应该不会很难。

【问题讨论】：

那里有一个Bootstrap accessibility plugin（由 Paypal 制作 - V. Tsaran 和 D. Lembree 知道他们的东西 ;)）。你应该看看它已经做了什么，这可能会避免你重新发明轮子。选中的按钮...有意义吗？可以检查复选框，当然也可以仅使用 WAI-ARIA 来检查 div 或 span，但是按钮已经有了作用，而且非常不同
谢谢，真的很有帮助

标签： html twitter-bootstrap accessibility

【解决方案1】：

我认为屏幕阅读器不会将它们视为一组按钮，除非您使用 input type=radio 并将它们设置为看起来像按钮。

还告诉选择“aria-pressed”哪个按钮更好。

【讨论】：

【解决方案2】：

我能想到的一个解决方案是将 role="radio" 添加到按钮中，以便屏幕阅读器将它们视为一个组。我实际上工作，但我不确定它是否被认为是不好的做法

【讨论】：