如何让屏幕阅读器将列表读取为“x 个项目的列表”答案

【问题标题】：How to make the screen reader read a list as "list of x number of items"如何让屏幕阅读器将列表读取为“x 个项目的列表”
【发布时间】：2017-08-23 03:47:19
【问题描述】：

我正在与 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 items listitem”。在我的代码中有 5 个L1、4 个L2，然后是 6 个L3。我只是在这个 sn-p 中简短。

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

【问题讨论】：

在 iPhone 上使用画外音，这 6 个项目都没有被读出，列表的开头和结尾也很奇怪
读起来好像每个新列表之前都有一个结束标记，就好像浏览器在开始下一个列表之前自动完成每个 ul 一样

标签： javascript jquery list screen-readers

【解决方案1】：

有两种可能。

正如@Louys Patrice Bessette 指出的那样，您的 HTML 代码编写不当：<ul>4 more L1 here </ul> 不是有效的 HTML，因此您的屏幕阅读器会卡在上面。
您误解了用户使用屏幕阅读器的方式。实际上，他们不会将鼠标悬停在元素上，他们（事实上，我们）几乎从不使用鼠标。您似乎在这里使用的鼠标回声功能只是一个辅助功能，旨在供失明人士使用，在有视力的帮助下工作以及在这种罕见的情况下使用。基本上，我们使用 Tab 或箭头浏览页面，因此在测试时，请使用 Tab 键和向上/向下箭头来了解页面上发生的情况。

【讨论】：

【解决方案2】：

我不习惯阅读器...但我理解正确，这样的阅读器会口头告诉用户列表中有多少列表项...对于残疾人士。

所以看看你的列表结构。
这个ul的位置很奇怪：

<ul>4 more L1 here </ul>

这是一个没有项目的嵌套列表...
它的直接父级是另一个 ul，它不是有效的 HTML。

我不知道一些 CSS 的结果是什么......也许这并不明显，因为现代浏览器正在处理错误的标记。

尝试将此代码剪切并粘贴到W3C markup validator...

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <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>
          <li> 3 more L2...
            <ul>
              <li> 6 more L3 here </li>
            </ul>
          </li>
          <ul>4 more L1 here </ul>
        </ul>
      </li>
    </ul>
  </body>
</html>

你会因为那个ul而得到一个错误：

错误：在此上下文中元素 ul 不允许作为元素 ul 的子级。

虽然这个是有效的：

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <ul class="L1">
      <li>
        <a href="#">L1#1</a>
        <ul class="L2">
          <li>
            <span> <a href="link">L2 #1</a> </span>
            <ul class="L3">
              <li> <a href="link">L3 #1</a> </li>
              <li> <a href="link">L3 #2</a> </li>
              <li> <a href="link">L3 #3</a> </li>
              <li> <a href="link">L3 #4</a> </li>
              <li> <a href="link">L3 #5</a> </li>
              <li> <a href="link">L3 #6</a> </li>
            </ul>
          </li>
          <li> L2 #2
            <ul class="L3">
              <li> <a href="link">L3 #1</a> </li>
              <li> <a href="link">L3 #2</a> </li>
              <li> <a href="link">L3 #3</a> </li>
              <li> <a href="link">L3 #4</a> </li>
              <li> <a href="link">L3 #5</a> </li>
              <li> <a href="link">L3 #6</a> </li>
            </ul>
          </li>
        </ul>
      </li>
      <li>L1#2</li>
      <li>L1#3</li>
      <li>L1#4</li>
    </ul>
  </body>
</html>

所以我认为这是您问题的根源。
在说明读者有问题之前，我会先探索这条途径……或者尝试使用附加代码解决这个问题。

【讨论】：

从<li> 3 more L2 ...行到最后的代码都是和上面一样的代码块，我把...放在那里表示列表是多个嵌套列表。我的问题是，读者正在阅读L2 的列表，其中读者应该从它的孩子而不是兄弟姐妹那里阅读“x 项目列表”。与L3 相同。