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

Question

在我的代码中，我有一个存储在无序列表中的按钮列表。如果您启用屏幕 reader 并切换到任何 li 元素，大多数 reader 会从列表中的元素中读出您所在的元素（例如“列表第 1 项，第 2 项，共 4").

我很好奇的是，是否可以将两者合并，这样当您按 Tab 键时，您按 Tab 键到按钮上，但您还可以获得屏幕读出的列表项信息 reader。

下面是我当前代码的示例代码（第一个），第二个只是为了说明屏幕 reader 发声 4 中的 2。

<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 键时，用户都希望输入 toolbar/listbox 并在下一个选项卡上退出，而不是按 Tab 键到所有按钮。在同一工具栏或列表框中从一个按钮转到另一个按钮是使用箭头键完成的。

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

How to make a UL list of buttons accessible?

html

accessibility

web-accessibility