How to make a UL list of buttons accessible?

Question

In my code I have a list of buttons stored in an unordered list. If you enable a screen reader and you tab into any li element, most readers will read out which element you're on out of how many is on the list (e.g. "List item 1, item 2 of 4").

What I was curious about is it possible to merge the two so that when you tab, you tab onto the button but you also get the list item information read out by the screen reader.

Below is example code of my current code (first) and the second is just to illustrate the screen reader voicing 2 of 4.

Answer 1

You may try something like this:

<ul role="toolbar">
    <li><button aria-setsize="4" aria-posinset="1">Button 1</button></li>
    <li><button aria-setsize="4" aria-posinset="2">Button 2</button></li>
    <li><button aria-setsize="4" aria-posinset="3">Button 3</button></li>
    <li><button aria-setsize="4" aria-posinset="4">Button 4</button></li>
</ul>

You may also try the role listbox instead of toolbar, ependening on which one fits the best your particular case semantically speaking.

Note that, in both cases, when pressing tab, the user will expect to enter in the toolbar/listbox and go out of it on the next tab, rather than tabbing onto all buttons. Going from one button to the other within the same toolbar or listbox is done with arrow keys.