时间戳

首页 > 解决方案 > 屏幕阅读器不会读取列表大小/数量

  • 内的元素

    • html - 屏幕阅读器不会读取列表大小/数量
  • 内的元素
      或者

      • 问题描述

      我有一个无序列表，我希望屏幕阅读器像这样读取："XXX_LABEL list with 4 elements"。

      这确实在代码中使用 <ul> 的不同部分起作用，然后是包含 <a> 标记的 DIV。

      现在我在这个表单中更进一步，并且在该列表中有一个带有多个 <li> 标记的 <ul> 标记。在每个 <li> 标签中，有几个 <div>-标签和一个 <input> 字段。

      现在，当用户点击输入字段时，将读取 <ul> 的标签，但没有元素数量。所以现在听起来像这样："XXX_LABEL2 list"。

      我在这里做错了什么？

      使用的屏幕阅读器：NVDA

      代码示例（来自 HTML 中的浏览器控制台）：

      <ul id="SOMETHING_ID1_LIST" class=textRowListHeader" aria-labelledby="XXX_LABEL2">
  <li class ="textRowListItem">...\</li>
  <li class ="textRowListItem">...\</li>
  <li class ="textRowListItem">...\</li>
  <li class ="textRowListItem">...\</li>
</ul>

      标签： htmllistwai-ariascreen-readersnvda

      解决方案

      嗯，有趣。看起来像 NVDA 中的错误。JAWS 正确处理它并在两种情况下都说“列出 3 个项目”。iOS 上的 VoiceOver 会部分处理它。这与<input>您的第二个列表中的有关。第一个带有链接的列表工作正常。

      使用 VoiceOver，第一个列表在第一个链接之前宣布“列表开始”（它没有说项目数，但这是 VoiceOver 的选择），然后在我到达列表中的最后一个链接时宣布“列表结束”。在该<input>示例中，VoiceOver 不会宣布“列表开始”但会宣布“列表结束”，因此它会部分处理它。

      这是我用来测试的代码：

      <button>foo</button>
<ul>
    <li>
        <div>
            <a href='.'>a</a>
            <a href='.'>b</a>
        </div>
    </li>
    <li>
        <div>
            <a href='.'>c</a>
            <a href='.'>d</a>
        </div>
    </li>
    <li>
        <div>
            <a href='.'>e</a>
            <a href='.'>f</a>
        </div>
    </li>
</ul>
<button>foo</button>
<ul>
    <li>
        <div>
            <label>a<input></label>
            <label>b<input></label>
        </div>
    </li>
    <li>
        <div>
            <label>c<input></label>
            <label>d<input></label>
        </div>
    </li>
    <li>
        <div>
            <label>e<input></label>
            <label>f<input></label>
        </div>
    </li>
</ul>
<button>foo</button>

      （我在列表之前、之间和之后都有虚拟按钮，以便在进入列表之前有一个元素需要关注。）

      Chrome 开发工具中的可访问性检查器为两个列表显示相同的属性，因此它们应该被宣布相同，但这不是我所听到的。

      您当然可以尝试围绕它编写代码，但我不会担心。相反，您应该向 NVDA 报告错误，https://github.com/nvaccess/nvda/issues

      推荐阅读