Screenreader应该同时读取aria标签和原始内容

Question

我需要屏幕阅读器首先读取aria标签中的文本，然后也是元素的内容。在这个例子中:

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

我需要它来读"参与者马丁克拉克"。不幸的是，屏幕阅读器只读取咏叹调标签中存在的文本。我不能把名字放在咏叹调标签上。有什么想法吗?

Answer 1

这不是一个正确使用aria标签:

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

但是为什么是"参与者"呢?一开始就藏起来了?视觉用户如何知道某人是参与者?

如果信息非常重要，需要为AT用户添加，请考虑使其对所有用户可见。——如上

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

<p><span class="visually-hidden">Participant</span>
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;
}

Scott O'Hara写了一篇很棒的文章，解释了代码中隐藏元素的所有细节，但要确保AT可以访问它:包括隐藏