Question

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

＆＃13;

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

＆＃13;

目前，读者在L1聚焦或标签时读取我的列表作为＆＃34;列表，其中包含5项listitem＆＃34;。在L2中，当L1悬停时，会显示＆＃34;列出4项listitem＆＃34;，然后当它集中在L3时，它读为＆＃34; list 6 item listitem＆＃34;。在我的代码中，有5 L1，4 L2，然后是6 L3。我只是在这个片段中缩短了。

我希望将L1作为带有4个项目的＃34;列表来阅读＃34;然后L2作为＆＃34;列表，包含6个项目＆＃34;。我只能通过JavaScript文件为元素添加属性。

Answer 1

我不习惯读者...但正如我所理解的那样，这样的读者会在声音中告诉用户列表中有多少列表项......对于残障人士。

那么看一下你的列表结构这个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>

所以我认为这是你问题的根源在说明读者有错误之前，我会探索这条大道...或试图用附加代码解决这个问题。

Answer 2

有两种可能性。

你写的HTML代码写得不好，正如@Louys Patrice Bessette指出的那样：<ul>4 more L1 here </ul>是无效的HTML，所以你的屏幕阅读器会卡在它上面。
您误解了用户使用屏幕阅读器的方式。实际上，他们没有将鼠标悬停在元素上，他们（事实上，我们）几乎从不使用鼠标。您似乎在这里使用的鼠标回声功能只是一个帮助功能，设计用于盲人，使用有视力的帮助以及在极少数情况下使用。基本上，我们选择标签或箭头，因此在测试时，请使用Tab键和向上/向下箭头来了解页面上发生的情况。

如何使屏幕阅读器读取列表为＆＃34; x个项目列表＆＃34;

2 个答案: