html - 可访问性:将 div 中的多个跨度作为一个句子读出

Question

我在这里有点进退两难。

遇到了一个可访问性问题，我在 div 面板中有多个文本元素。大多数屏幕阅读器单独阅读元素。

我希望它们被单句阅读。

---

以下是我的最小版本代码:

<div>
  <span>My special coffee is</span>
  <b class="heading">Cappuccino</b>
  <span>. I can drink it all day</span>
</div>

---

在为父元素添加 role="text" 后，效果很好，但 text 不在 supported list of roles 中.

aria- describeby 在这里也不起作用。

我正在使用适用于 Windows 的 NVDA 屏幕阅读器软件。

这里的标准推荐方法是什么？

Answer 1

你怎么做(但不应该)

这是“正确”执行此操作的方法，并解释了为什么您不应该执行此操作。

如果您无法使用我们在这种情况下经常使用的 role="text" hack，那么您将不得不求助于添加一个单独的屏幕阅读器友好版本的文本是 visually hidden然后使用 aria-hidden="true" 隐藏原始文本。我的答案末尾的示例。

这带来了它自己的问题，因为 aria-hidden 并不是所有浏览器/屏幕阅读器组合都 100% 支持(但支持很好)，所以你会让一些用户听到这部分两次。

在我看来，这比单词之间的轻微停顿更糟糕，但有时客户不会听理由，所以如果你最终不得不这样做，我理解。

我的建议

按照@QuentinC 的建议使用 role="text" hack，由于某些限制，这是可访问性的标准做法。

要么这样，要么不管它，并接受这样一个事实，即如果这是您网站上最严重的可访问性问题，那么根本没有人会介意它。使用 aria-hidden 来正确读取某些内容并不是一个好习惯(在撰写本文时，他们最终可能会实现这一点)。

让您知道Deque / Axe are going to add this as an exception看来，这应该让你相信很多人都同意 role="text" 方法。

示例

.visually-hidden { 
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; /* added line */
}

<div aria-hidden="true">
  <span>My special coffee is</span>
  <b class="heading">Cappuccino</b>
  <span>. I can drink it all day</span>
</div>
<p class="visually-hidden">My special coffee is Cappuccino. I can drink it all day</p>