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.

<div>
  This example shows that you tab straight to the button but don't get the list information
  <ul>
    <li><button onClick="alert('Button 1')">Button 1</button></li>
    <li><button onClick="alert('Button 2')">Button 2</button></li>
    <li><button onClick="alert('Button 3')">Button 3</button></li>
    <li><button onClick="alert('Button 4')">Button 4</button></li>
  </ul>
</div>
<div>
  This example shows that if you add tab index on a list item you get the count of items in the list
  <ul>
    <li tabindex="0"><button onClick="alert('Button 1')">Button 1</button></li>
    <li tabindex="0"><button onClick="alert('Button 2')">Button 2</button></li>
    <li tabindex="0"><button onClick="alert('Button 3')">Button 3</button></li>
    <li tabindex="0"><button onClick="alert('Button 4')">Button 4</button></li>
  </ul>
</div>

Solution

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.

Comments

[k2snowman69]

I was hoping there was something that wouldn't require the explicit aria label tags but this is the solution I keep coming back to.

[J. Hesters]

When I use your example, "tab" switches between buttons, rather than the arrow keys. How can I get the arrow keys to move between these buttons rather than tab?