辅助功能 - 嵌套列表项

Question

是否可以使屏幕阅读器正确读取嵌套列表项？我不能使用 uls 和 lis 我需要对 div 进行操作。 考虑下面的代码，我希望屏幕阅读器读取该列表包含 4 个项目，但它总是说该列表包含 2 个元素。我做错了什么？

<div role="list">
    <div>
        <div role="listitem"/>
        <div role="listitem"/>
    </div>
    <div>
        <div role="listitem"/>
        <div role="listitem"/>
    </div>
</div>

在我看来，role="list" 总是检查它有多少个直接子节点并将它们视为列表项。但在这种情况下，使用 role="listitem" 的意义何在？我也尝试使用 role="group"，但没有成功。

Answer 1

代码示例中的角色嵌套不正确。假设您想要相当于以下内容：

<ul>
  <li>Vegetables
    <ul>
      <li>Tomatoes</li>
      <li>Lettuce</li>
      <li>Broccoli</li>
    </ul>
  </li>
  <li>Fruit</li>
  <li>Meat</li>
  <li>Bread</li>
</ul>

（请注意，您不能将

ul

直接嵌套在另一个

ul

中；您始终需要一个

li

元素。）

然后用

div

元素和

role

属性替换标准列表标记，应生成以下代码：

  <div role="list">
    <div role="listitem">Vegetables
      <div role="list">
        <div role="listitem">Tomatoes</div>
        <div role="listitem">Lettuce</div>
        <div role="listitem">Broccoli</div>
      </div>
    </div>
    <div role="listitem">Fruit</div>
    <div role="listitem">Meat</div>
    <div role="listitem">Bread</div>
  </div>

这意味着您永远不会有一个

div

里面没有角色

<div role="list">

。此外，您不能将

<div role="list">

直接嵌套在另一个

<div role="list">

中；子列表应该位于

<div role="listitem">

内，就像子列表的

ul

应该位于

li

内一样。

NVDA 的阅读方式与常规无序列表基本相同，除了要点的公布之外。当它找到子列表时，它会将其宣布为包含三个项目的列表。由于它不离开外层列表，因此在宣布子列表之前不会说“out of list”；这是一个微妙的提示，它开始读取子列表而不是新列表。