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

【问题标题】：Screenreader should read both aria-label and original content屏幕阅读器应同时阅读 aria-label 和原始内容
【发布时间】：2022-08-23 16:31:01
【问题描述】：

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

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

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

accessible360.com/accessible360-blog/…

标签： html wai-aria screen-readers

【解决方案1】：

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

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

但为什么“参与者”一开始就被隐藏起来了呢？视觉用户如何得知某人是参与者？
如果信息对 AT 用户来说足够重要，请考虑使其对所有用户可见。 ——同上

如果您仍然希望它只对屏幕阅读器用户可见，请使用另一个在视觉上隐藏的元素：
<p><span class="sr-only">Participant</span>
  Martin Clark</p>
许多 CSS 库为此提供了一个类。这是Bootstrap 5's visually-hidden 的代码，让您了解在滚动自己的 CSS 时该怎么做。 Bootstrap 在其 sr-only 类中使用它：
@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;
}
Scott O'Hara 写了一篇很棒的文章，解释了代码中隐藏元素的所有细节，但要确保 AT 可以访问它：Inclusively Hidden

【讨论】：