CODEWITHSUNDEEP
htmltwitter-bootstrapaccessibility
s_curry_s
s_curry_s

Reputation: 3432

Accessible Bootstrap button groups

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.

Upvotes: 2

Views: 1149

Answers (2)

s_curry_s
s_curry_s

Reputation: 3432

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

Upvotes: 0

508Ninja
508Ninja

Reputation: 95

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.

Upvotes: 1

Related Questions