Question

在我的代码中，我有一个存储在无序列表中的按钮列表。如果你启用了一个屏幕阅读器并且你选择了li个元素，那么大多数读者会读出你所在的元素（列出项目1，第2项，共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键时，用户将希望进入工具栏/列表框并在下一个选项卡上退出，而不是按Tab键到所有按钮。使用箭头键在同一个工具栏或列表框中从一个按钮转到另一个按钮。

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

1 个答案: