Question

我想知道是否可以为屏幕阅读器设置特定区域以专注于HTML内容。

我有一个类似如下的列表：

<ol>
  <li>
    <div class="duration">
      <time>10:00</time>
      <span>to</span>
      <time>11:00</time>
    </div>
    <div class="info">
      <span>CA267 Lecture</span>
      <span>Software Testing</span>
      <span>Location: QG27</span>
    </div>
  </li>
</ol>

当我将屏幕阅读器（在我的情况下，语音结束）带到列表项目时，它就开始了 10:00然后我必须按ctrl + alt +向左箭头键移动到“to”然后再移动到11:00，依此类推。

我想知道有没有办法对元素进行分组，以便屏幕阅读器专注于<li>标记，并相应地读出其中的所有内容？

我尝试设置tabindex它有点工作，但要求屏幕阅读器用户使用tab键进行导航而不是内置的快捷键。

谢谢！

Answer 1

ARIA属性可以做到这一点，但规范还没有完成，有点混乱（至少对我来说），并且屏幕阅读器支持不是最佳的。我想也许你可以申请aria-labelledby或aria-describedby，但我在mdn中查看的两个解决方案都需要改变你的标记。只需向aria-labelledby添加一些ID，然后在ol上添加aria-labelledby元素，就可以实现div。你可以在这里查看：https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute

为HTML屏幕阅读器设置焦点

1 个答案: