html - 如何使按钮的 UL 列表可访问？

Question

在我的代码中，我有一个存储在无序列表中的按钮列表。如果您启用了屏幕阅读器并且您选择了任何 li元素，大多数读者会从列表中的元素中读出您所在的元素(例如“列出第 1 项，第 2 项，共 4 项”)。
我很好奇的是可以将两者合并，这样当你使用 Tab 键时，你可以在按钮上使用 Tab 键，但你也会得到屏幕阅读器读出的列表项信息。
下面是我当前代码的示例代码(第一个)，第二个只是为了说明屏幕阅读器的 2 of 4。

<div>
  This example shows that you tab straight to the button but don't get the list information
  <ul>
    <li><button onClick="alert('Button 1')">Button 1</button></li>
    <li><button onClick="alert('Button 2')">Button 2</button></li>
    <li><button onClick="alert('Button 3')">Button 3</button></li>
    <li><button onClick="alert('Button 4')">Button 4</button></li>
  </ul>
</div>
<div>
  This example shows that if you add tab index on a list item you get the count of items in the list
  <ul>
    <li tabindex="0"><button onClick="alert('Button 1')">Button 1</button></li>
    <li tabindex="0"><button onClick="alert('Button 2')">Button 2</button></li>
    <li tabindex="0"><button onClick="alert('Button 3')">Button 3</button></li>
    <li tabindex="0"><button onClick="alert('Button 4')">Button 4</button></li>
  </ul>
</div>

Answer 1

你可以尝试这样的事情:

<ul role="toolbar">
    <li><button aria-setsize="4" aria-posinset="1">Button 1</button></li>
    <li><button aria-setsize="4" aria-posinset="2">Button 2</button></li>
    <li><button aria-setsize="4" aria-posinset="3">Button 3</button></li>
    <li><button aria-setsize="4" aria-posinset="4">Button 4</button></li>
</ul>

您也可以尝试使用角色列表框而不是工具栏，这取决于从语义上讲哪个最适合您的特定情况。

请注意，在这两种情况下，按 Tab 键时，用户都希望进入工具栏/列表框并在下一个选项卡上退出，而不是按 Tab 键切换到所有按钮。
在同一工具栏或列表框中从一个按钮到另一个按钮是用箭头键完成的。