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

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

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

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describeby_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

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

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

强制可访问技术的非标准行为可能会给这些用户带来令人沮丧的体验。

编辑：我还尝试向 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 代码，为了简单起见，这个例子中没有包含）

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

我已经在您的 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，项目 1，项目 2，项目 3”

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

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

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

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

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

我再次单击向下箭头键。

“三分之三。子弹。项目3​​”。

这种行为是我所期望的，并且是 - 根据我通过两次 Double-A WCAG 2.1 评估的经验 - 规范。

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

Answer 4

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