8

在我的代码中，我有一个存储在无序列表中的按钮列表。如果您启用屏幕阅读器并使用标签进入任何li元素，大多数阅读器会从列表中的多少个元素中读出您所在的元素（例如“列表第 1 项，第 2 项，共 4 项”）。

我很好奇的是可以合并这两者，这样当你点击时，你可以点击按钮，但你也会得到屏幕阅读器读出的列表项信息。

下面是我当前代码的示例代码（第一个），第二个只是为了说明屏幕阅读器发出 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>

4

1 回答 1

8

你可以尝试这样的事情：

<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。在同一个工具栏或列表框中从一个按钮到另一个按钮是使用箭头键完成的。

于 2017-08-03T18:02:46.557 回答