javascript - ARIA 让读者阅读非重点元素内容

Question

我在页面上有“可聚焦”的元素(按钮、带有 tabindex 的元素等)，屏幕阅读器可以很好地阅读内容。

但是，我还有其他一些不可聚焦的元素(因为它们很多 - 下拉列表结果等)，所以我不希望用户无数次单击选项卡，但它们可以通过左/右/导航up/down 键，它们会被 CSS 类“选中”(尽管其他一些元素——它们的父元素——实际上是聚焦的)

我想让读者阅读那些特定的元素，并“选择”类。我该怎么做？

(我尝试将属性 aria-label="read this"应用于它们，但它不起作用；它仅在元素实际聚焦时才有效)

以下是更多详细信息，可帮助您了解我想要实现的目标:

<div tabindex="0" >
  <span>title1</span>
  <ul>
    <li class="selected">item1</li>
    <li>item2</li>
    <li>item3</li>
  </ul>
</div>

<div tabindex="0">
  <span>title2</span>
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
  </ul>
</div>

这是 fiddle :https://jsfiddle.net/d5gbjst1/1/

您可以在这 2 个 div 之间来回切换，任何屏幕阅读器(我尝试使用 Windows Narrator、NVDA 和 JAWS)将读取“title1”以及第一个和“title2”的所有元素以及第二个的所有元素， 取决于焦点在哪里 .

请注意第一个 ul 中第一个元素上的“选定”类。现在，我使用向上/向下箭头浏览我的 ul 列表，并且“选定”类相应地从一个元素转移到另一个元素。 (这是单独的 JS 代码，为简单起见，未包含在此示例中)

当“选定”类应用于元素时，我想强制读者阅读它。有可能吗？

编辑:我也尝试向 ul 和 li 添加属性，但仍然没有运气:

<ul role="list">
 <li role="listitem">

Answer 1

前一周我遇到了同样的问题，我采用的解决方案是使用aria-describedby还有aria-label在当前具有焦点的元素中提供来自页面周围的额外信息。

在一种情况下，我们更改 aria-label 的内容仅在元素第一次获得焦点时提供额外的细节。

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute