javascript - 如何让屏幕阅读器读取列表为 "list of x number of items"

Question

我正在与 WCAG 合作。我想解决屏幕阅读器读取嵌套列表的方式。

<ul class="L1">
  <li>
    <a href="#">L1 Text Here</a>
    <ul class="L2">
      <li>
        <span> <a href="link">L2 Text Here</a> </span>
        <ul class="L3">
          <li> <a href="link">L3 Text Here</a> </li>
          <li> <a href="link">Another L3 Text Here</a> </li>
          <li> <a href="link">Another L3 Text Here</a> </li>
          <li> <a href="link">Another L3 Text Here</a> </li>
          <li> <a href="link">Another L3 Text Here</a> </li>
          <li> <a href="link">Another L3 Text Here</a> </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
<ul class="L1">
  <li>
    <a href="#">L1 Text Here</a>
    <ul class="L2">
      <li>
        <span> <a href="link">L2 Text Here</a> </span>
        <ul class="L3">
          <li> <a href="link">L3 Text Here</a> </li>
          <li> <a href="link">Another L3 Text Here</a> </li>
          <li> <a href="link">Another L3 Text Here</a> </li>
          <li> <a href="link">Another L3 Text Here</a> </li>
          <li> <a href="link">Another L3 Text Here</a> </li>
          <li> <a href="link">Another L3 Text Here</a> </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
<ul class="L1">
  <li>
    <a href="#">L1 Text Here</a>
    <ul class="L2">
      <li>
        <span> <a href="link">L2 Text Here</a> </span>
        <ul class="L3">
          <li> <a href="link">L3 Text Here</a> </li>
          <li> <a href="link">Another L3 Text Here</a> </li>
          <li> <a href="link">Another L3 Text Here</a> </li>
          <li> <a href="link">Another L3 Text Here</a> </li>
          <li> <a href="link">Another L3 Text Here</a> </li>
          <li> <a href="link">Another L3 Text Here</a> </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

目前，读者在 L1 中聚焦或按选项卡时会读取我的列表，作为“包含 5 个项目的列表”。在 L2 中，当鼠标悬停在 L1 上时，它会读取“list with 4 items listitem”，然后当聚焦在 L3 上时，它会读取为“list 6 项列表项”。在我的代码中，有 5 个 L1、4 个 L2，然后是 6 个 L3。我只是在这段代码中将其简短化。

我希望将 L1 读取为“包含 4 个项目的列表”，然后将 L2 读取为“包含 6 个项目的列表”。我只能通过 JavaScript 文件向元素添加属性。

Answer 1

有两种可能性。

1. 您的 HTML 代码写得不好，正如 @Louys Patrice Bessette 指出的那样:<ul>4 more L1 here </ul>不是有效的 HTML，因此您的屏幕阅读器会卡在上面。
2. 您误解了用户使用屏幕阅读器的方式。实际上，他们不会将鼠标悬停在元素上，他们(事实上，我们)几乎从不使用鼠标。您似乎在这里使用的鼠标回显功能只是一个辅助功能，专为失明人士使用、在视力正常的情况下工作以及此类罕见情况而设计。基本上，我们通过 Tab 键或箭头键浏览页面，因此在测试时，请使用 Tab 键和向上/向下箭头来了解页面上发生的情况。