a11y - Should a list of buttons be a tablist or keep as a list of buttons?

user_3642967 0
Viewed 116

I've got a list of buttons that filter a catalog in a SPA app. The structure looks like this:

<div>
  <button>filter 1</button>
  <button>filter 2</button>
  <button>filter 3</button>
</div>
<div>
   {results}
</div>

Clicking each of button causes new results to be fetched from a server and then updated in the area {results}.

We've got an accessibility expert that is insisting that we change the above structure to be a tablist, but I don't see how it would work, as from my understanding, a tablist needs tabs and a corresponding tabpanel. The buttons could be the tabs, but what of the tabpanel? I don't have the data pre-existing, it must be fetched when the buttons are clicked.

How would I update the above to make it comply with accessibility?

wai-aria accessibility
1 Answers

It kind of feels like a tablist because clicking on the buttons essentially changes your view but there is not an accessibility reason that you have to use the tablist design pattern.

I agree that you'd sort of be "forcing" it into the pattern since you only have one panel that updates rather than three separate panels.

It's perfectly fine to have a group of 3 buttons all update the same container and not use a tablist.

Is it obvious to the non-sighted user that they have 3 buttons to choose from? If not, it might be nice to have them contained in a list. You can use a real <ul> and turn off the bullet point styling or use role="list" and role="listitem".

<div role="list">
  <span role="listitem">
    <button>filter 1</button>
  </span>
  <span role="listitem">
    <button>filter 2</button>
  </span>
  <span role="listitem">
    <button>filter 3</button>
  </span>
</div>

I used <span> containers for the buttons to keep the inline nature of your original example.

Next, is it obvious to the non-sighted user that the page has updated when the button was selected? It might be as simple as saying "selecting a button will update the results" or it might be obvious from the button labels. Depending on your situation, aria-live might be needed. But that's going beyond the extend of your original question.

user_767140
Related