如何使按钮的 UL 列表可访问? [英] How to make a UL list of buttons accessible?

问题描述

在我的代码中，我有一个存储在无序列表中的按钮列表.如果您启用屏幕阅读器并按 Tab 键进入任何 li 元素，大多数阅读器会从列表中的元素中读出您所在的元素(例如列表项 1，项 24").

我很好奇的是，是否可以将两者合并，这样当您使用 Tab 键时，您可以使用 Tab 键切换到按钮上，同时您还可以通过屏幕阅读器读取列表项信息.

下面是我当前代码的示例代码(第一个)，第二个只是为了说明屏幕阅读器的 2 个 4 个.

此示例显示您直接点击按钮但未获取列表信息<ul><li><button onClick="alert('Button 1')">按钮 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')">按钮 4</button></li>
<div>此示例显示，如果在列表项上添加选项卡索引，您将获得列表中的项数<ul><li tabindex="0"><button onClick="alert('Button 1')">按钮 1</button></li><li tabindex="0"><button onClick="alert('Button 2')">按钮 2</button></li><li tabindex="0"><button onClick="alert('Button 3')">按钮 3</button></li><li tabindex="0"><button onClick="alert('Button 4')">按钮 4</button></li>

解决方案

您可以尝试以下操作:

<li><button aria-setsize="4" aria-posinset="1">按钮 1</button></li><li><button aria-setsize="4" aria-posinset="2">按钮 2</button></li><li><button aria-setsize="4" aria-posinset="3">按钮 3</button></li><li><button aria-setsize="4" aria-posinset="4">Button 4</button></li>

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

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

In my code I have a list of buttons stored in an unordered list. If you enable a screen reader and you tab into any li element, most readers will read out which element you're on out of how many is on the list (e.g. "List item 1, item 2 of 4").

What I was curious about is it possible to merge the two so that when you tab, you tab onto the button but you also get the list item information read out by the screen reader.

Below is example code of my current code (first) and the second is just to illustrate the screen reader voicing 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>

解决方案

You may try something like this:

<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>

You may also try the role listbox instead of toolbar, ependening on which one fits the best your particular case semantically speaking.

Note that, in both cases, when pressing tab, the user will expect to enter in the toolbar/listbox and go out of it on the next tab, rather than tabbing onto all buttons. Going from one button to the other within the same toolbar or listbox is done with arrow keys.

这篇关于如何使按钮的 UL 列表可访问?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！