Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make a UL list of buttons accessible?

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>
like image 661
k2snowman69 Avatar asked Aug 01 '17 23:08

k2snowman69


People also ask

How do you make a button accessible?

Buttons should always have an accessible name. For most buttons, this name will be the same as the text inside the button, between the opening and closing tags. In some cases, for example buttons represented by icons, the accessible name may be provided from the aria-label or aria-labelledby attributes.

How do I make a list accessible?

If you think of a series of items as a list, making it into a numbered or bulleted list will help assistive technology users to navigate and understand the items in the list.

How do I make a list accessible in HTML?

Only use role="list" and role="listitem" if you have to — for example if you don't have control over your HTML but are able to improve accessibility dynamically after the fact with JavaScript. Note: The ARIA list / listitem roles don't distinguish between ordered and unordered lists.

Can I put button in UL?

The Unordered List HTML element can be manipulated by using CSS to create clickable buttons. Reusing a block element is efficient as the basic structure of the button set is already inherent in the UL element, all that remains to do is restyle it so that it looks and behave like buttons.


1 Answers

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.

like image 133
QuentinC Avatar answered Oct 07 '22 07:10

QuentinC