辅助功能：看起来像带有单个面板的选项卡的设计模式

Question

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

这是一个非常常见的用例，但似乎并不直接符合WAI ARIA 示例中解释的任何模式。据我所知，过滤器的功能可以属于以下模式之一：

1. 选项卡，但每个选项卡没有单独的面板，可以在选项卡选择时隐藏/显示，而只是内容动态更改的单个面板。
2. 带有单选按钮的单选组，用于控制另一个 DOM 元素。
3. 选择功能，但样式是所有选项同时可见，并且选择控制另一个 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>