a11y - 按钮列表应该是 tablist 还是保留为按钮列表？

Question

我有一个按钮列表，用于过滤 SPA 应用程序中的目录。 结构如下所示：

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

单击每个按钮会导致从服务器获取新结果，然后在区域 {results} 中更新。

我们有一位可访问性专家坚持我们将上述结构更改为选项卡列表，但我不知道它会如何工作，据我了解，选项卡列表需要选项卡和相应的选项卡面板。 按钮可以是选项卡，但选项卡面板呢？ 我没有预先存在的数据，必须在单击按钮时获取它。

我将如何更新上述内容以使其符合可访问性？

Answer 1

它有点像 tablist ，因为点击按钮本质上会改变您的视图，但没有可访问性的原因，您必须使用tablist 设计模式。

我同意你会“强迫”它进入模式，因为你只有一个更新的面板而不是三个单独的面板。

让一组 3 个按钮全部更新同一个容器而不使用 tablist 是非常好的。

对盲人用户来说，他们有 3 个按钮可供选择吗？ 如果没有，将它们包含在列表中可能会很好。 您可以使用真正的<ul>并关闭项目符号样式或使用role="list"和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>

我使用<span>容器作为按钮来保持原始示例的内联性质。

接下来，对于无视力的用户来说，当按钮被选中时页面已经更新是显而易见的吗？ 这可能就像说“选择一个按钮将更新结果”一样简单，也可能从按钮标签中显而易见。 根据您的情况，可能需要aria-live 。 但这超出了您最初问题的范围。