屏幕阅读器应同时阅读 aria-label 和原始内容

Question

我需要屏幕阅读器先阅读 aria 标签中的文本，然后再阅读元素的内容。 所以在这个例子中：

<p aria-label='Participant'>Martin Clark</p>

我需要它来阅读“参与者马丁克拉克”。 不幸的是，屏幕阅读器在 aria-label 存在时只能读取文本。 我不能把名字放在咏叹调标签中。 请问有什么想法吗？

Answer 1

这不是 aria 标签的正确使用：

aria-label 属性仅适用于交互式元素。 当放置在非交互式元素上时，例如上面列出的那些[包括段落]，它可能不会被阅读，或者可能会使您的用户混淆，因为它是一种像交互式元素一样的非交互式元素。 — MDN 网络文档

但为什么“参与者”一开始就被隐藏起来了呢？ 视觉用户如何得知某人是参与者？

如果信息对 AT 用户来说足够重要，请考虑使其对所有用户可见。 ——同上

如果您仍然希望它只对屏幕阅读器用户可见，请使用另一个在视觉上隐藏的元素：

<div class="your-class">Participant</div>
<p>Martin Clark</p>

许多 CSS 库为此提供了一个类。 下面是Bootstrap 5 的visually-hidden代码，让您了解在滚动自己的 CSS 时该怎么做：

@mixin visually-hidden() {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}