Accessibility: design pattern for what looks like Tabs with a single panel

user_2054671 0
Viewed 704

I have a Filter component in my app. It is a list of buttons out of which only one is selectable at a time. Once a filter is selected it changes/filters the content in a single panel. What accessibility practices should i make use of in this case to make it more accessible?

It is a very common use case but doesn't seem to fit in directly with any patterns explained in the WAI ARIA examples. The functionality for the filter, according to me, can fall into one of these patterns:

  1. Tabs, but each tab does not have a separate panel which gets hidden/shown on tab selection, rather just a single panel where content changes dynamically.
  2. Radio Group with Radio buttons, which controls another DOM element.
  3. Select functionality but the style is such that all options are visible at the same time, and the select controls another DOM element.

Any pointers or examples?

accessibility html
1 Answers

It seems to me that aria-controls is a good choice here.

Your group of buttons reproduces what is in fact a radiogroup selection, with only one choice selected.

Using radio elements would be a good approach for screenreader users (you can perfectly customize them to look like buttons of course), and then applying the aria-control on the radiogroup element.

Here is a full ARIA ample, but you can perfectly use native input[type='radio'] elements.

<div role="radiogroup" aria-controls="panel1" aria-labelledby="filter">
   <div id="filter">Filter by</div>
   <div role="radio" aria-checked="true" tabindex="0">Filter 1</div>
   <div role="radio" tabindex="0">Filter 2</div>
</div>
<div id="panel1">
   Results here
</div>
user_45401410
Related