辅助功能：具有单个面板的选项卡的设计模式

Question

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

这是一个非常常见的用例，但似乎与WAI ARIA示例中说明的任何patterns都不直接匹配。 根据我的说法，过滤器的功能可以归为以下一种模式：

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>