How do I make the UL Button List available?
In my code, I have a list of buttons stored in an unordered list. If you turn on your screen reader and you type a tab on any item li
, most readers will read which item you are using from a number in the list (for example, "List Item 1, Item 2 of 4").
I was curious if it is possible to combine the two so that when you click on a tab, you click a button, but you also get the list item information read by a screen reader.
Below is some sample code of my current code (the first one) and the second is just for illustrating a 2 of 4 screen reader.
<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>
source to share
You can 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 can also try a list of roles instead of the toolbar, ependening, in which one matches your particular case semantically.
Note that in both cases, when a tab is clicked, the user will wait for input to the toolbar / list box and exit in the next tab instead of tabbing all the buttons. Use the arrow keys to move from one button to another within the same toolbar or list.
source to share