html - 可访问性:类似于带有单个面板的选项卡的设计模式

Question

我的应用程序中有一个过滤器组件。它是一个按钮列表，一次只能选择一个按钮。选择过滤器后，它会更改/过滤单个面板中的内容。在这种情况下，我应该使用哪些可访问性实践来使其更易于访问？

这是一个非常常见的用例，但似乎不适合任何 patterns在 WAI ARIA 示例中进行了解释。
根据我的说法，过滤器的功能可以属于以下模式之一:

选项卡，但每个选项卡都没有单独的面板在选项卡选择时隐藏/显示，而只是一个内容动态变化的面板。

带有单选按钮的单选组，它控制另一个 DOM 元素。

Select 功能，但样式使得所有选项同时可见，并且 select 控制另一个 DOM 元素。

任何指针或例子？

Answer 1

在我看来 aria-controls 这里是个不错的选择。

您的按钮组再现了实际上是 radiogroup 的内容选择，只选择一个选项。

使用 radio对于屏幕阅读器用户来说，元素将是一个很好的方法(当然，您可以完美地自定义它们以使其看起来像按钮)，然后应用 aria-control在 radiogroup元素。

这是一个完整的 ARIA，但您可以完美地使用原生 input[type='radio']元素。

<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>