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

Question

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

但是，我还有一些其他不可聚焦的元素（因为它们有很多 - 下拉列表结果等），所以我不希望用户无数次单击选项卡，但它们可以通过左侧导航/right/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>

这是小提琴：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

Answer 2

我最近遇到了同样的问题，在研究过程中，我发现了关于 aria-activedescendant 属性的信息：https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute

在这种情况下，每个列表元素都应该有一个唯一的 id attr。选择列表元素时，应将其 id 提供给焦点父级的 aria-activedescendant attr。

<div tabindex="0" aria-activedescendant="Id1">
  <span>title1</span>
  <ul>
    <li class="selected" id="Id1">item1</li>
    <li id="Id2">item2</li>
    <li id="Id3">item3</li>
  </ul>
</div>

Answer 3

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

我认为你不应该尝试这样做。屏幕阅读器（尤其是您测试过的那些）具有复杂的键绑定，允许用户在特定元素之间导航、导航，然后进出它们。

对无障碍技术强制采用非标准行为可能会给这些用户带来令人沮丧的体验。

编辑：我也尝试将属性添加到 ul 和 li，仍然没有运气：

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

避免为列表设置角色，因为它们默认分配了这些角色。见这里：https://www.w3.org/TR/html53/grouping-content.html#ref-for-allowed-aria-role-attribute-values%E2%91%A1%E2%91%A0

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

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

我已经在你的 jsfiddle 中使用 narrator 和 Screen Reader Simulator for Chrome 进行了测试。预期的行为以及我设法重现的行为是您的目标。如果我错了，请纠正我？

首先，我单击选项卡并关注以下标记：

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

这会导致屏幕阅读器返回

“标题1，项目1，项目2，项目3”

快速连续。正如我所料。

我再次单击选项卡以关注这段标记：

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

屏幕阅读器返回

"标题 2，item1，item2，item3"

快速连续。再次，正如我所期望的那样

最后，我再次单击选项卡将焦点设置回第一段标记并使用向下箭头键。屏幕阅读器返回

“输入列表。三个之一。项目符号。第 1 项”

然后我再次单击向下箭头键以移动到第二个项目符号。

“三个中的两个。子弹。第 2 项。”

我再次单击向下箭头键。

“三之三。子弹。第 3 项”。

这种行为是我所期望的，并且是 - 从我通过两次双 A WCAG 2.1 评估的经验来看 - 常态。

您期望什么行为。具体来说，您希望屏幕阅读器返回/说什么？

Answer 4

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