A11Y-按钮列表是否应该是小型列表或作为按钮列表？

Question

我有一个按钮列表，可以过滤Spa应用中的目录。结构看起来像这样：

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

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

我们拥有一位可访问性专家，坚持认为我们将上述结构更改为一名表演者，但是我看不出它将如何工作，从我的理解中，小报需要选项卡和相应的TABPANEL。按钮可能是标签，但是TabPanel是什么？我没有预先存在的数据，在单击按钮时必须将其获取。

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

Answer 1

感觉就像是一个小报，因为单击按钮本质上会改变您的视图，但是没有可访问的原因，您必须使用

我同意您会将其“强迫”到模式中，因为您只有一个更新的面板，而不是三个单独的面板。

一组3个按钮都可以更新相同的容器，并且 使用小报是完全可以的。

对于非远见用户而言，他们有3个按钮可供选择吗？如果不是这样，最好将它们包含在列表中。您可以使用真实的＆lt; ul＆gt;，并关闭子弹点样式或使用role =“ list” and rowa =“ 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>

我使用＆lt; span＆gt;用于按钮的容器来保留原始示例的内联性。

接下来，对于非远见用户而言，该页面选择按钮时已更新该页面是显而易见的吗？这可能很简单，就像说“选择按钮将更新结果”，或者从按钮标签中显而易见。取决于您的情况， aria-live 可能需要。但这超出了您最初的问题的扩展。