Accessible Bootstrap button groups

2
votes

I am using the bootstrap button groups, and I want them to be accessible. Right now the screen reader sees them as separate buttons. I would like the screen reader to see them as a group or list of buttons.

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>

I would also want the screen reader to know which button is selected but that shouldn't be very hard with the aria-checked tag.

2
htmltwitter-bootstrapaccessibility
There's a Bootstrap accessibility plugin out there (made by Paypal - V. Tsaran and D. Lembree who know their stuff ;) ). You should look at what it already does, that may avoid you reinventing the wheel. A checked button... does it make sense? A checkbox can be checked, a div or a span may also be checked only with WAI-ARIA of course but button already has a role and it's very different – FelipeAls
Thank you it was really helpful – turbo

2 Answers

1
votes

I don't think screen reader will see them as group of buttons unless you use input type=radio and style them to look like buttons.

Also to tell which button is selected "aria-pressed" is better.

0
votes

One solution I can think of is to add role="radio" to the buttons so that screen reader sees them as a group. I actually works, but I am not sure if its considered bad practice