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

Question

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

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

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

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

我将如何更新以上内容以使其符合辅助功能？

Answer 1

感觉有点像标签列表，因为单击按钮本质上会改变您的视图，但没有可访问性原因让您必须使用tablist design pattern。

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

让一组 3 个按钮全部更新同一个容器并且不使用标签列表是完全没问题的。

non-sighted 用户是否清楚他们有 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> 按钮容器来保持原始示例的内联性质。

接下来，non-sighted 用户在选择按钮时页面是否已更新？它可能就像说“选择一个按钮将更新结果”一样简单，也可能从按钮标签中显而易见。根据您的情况，可能需要 aria-live 。但这超出了你原来问题的范围。

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

a11y - Should a list of buttons be a tablist or keep as a list of buttons?

accessibility

wai-aria