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

Question

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

但是，我还有一些其他不可聚焦的元素（由于它们很多 - 下拉列表结果等），所以我不希望用户无数次单击选项卡，但它们可以通过左/右/向上/向下键，它们会“选择”CSS 类（尽管其他一些元素 - 它们的父元素 - 实际上是重点）

我想让读者阅读这些特定元素，并使用“selected”类。我该怎么做？

（我尝试将属性 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>

这是小提琴：https : //jsfiddle.net/d5gbjst1/1/

您可以在这两个 div 之间来回切换，任何屏幕阅读器（我尝试使用 Windows 讲述人、NVDA 和 JAWS）都会读取“title1”以及第一个和“title2”的所有项目以及第二个的所有项目，取决于焦点在哪里。

注意第一个 ul 中第一个项目的类“选择”。现在，我使用向上/向下箭头浏览我的 ul 列表，并且“选定”类相应地从一个项目转移到另一个项目。（那是单独的 JS 代码，为了简单起见，这个例子中没有包含）

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

---

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

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

Answer 1

您可以尝试向这些特定元素添加选项卡索引，但使用它时应该小心，因为如果您使用大于 0 的值，它可能会导致页面很难导航。这里有一个更详细答案的链接。 https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex