将 aria-label 添加到文本元素

Question

所以我有一个 HTML 按钮，里面有 2 个 div - 每个都显示特定的文本。下面的示例代码。我需要在 2 个 div 之间插入一些文本，这样它只能由屏幕阅读器阅读，不需要视觉上的表达。这是一个大型共享组件，因此我无法真正修改控件本身，希望只调整可访问性部分：-

我尝试在 div2 上使用 aria-label，并 arialabelledBy 将标签文本隐藏在屏幕上（显示：无）。

<button>
    <div id="div1" >Main text here</div>
    <div id="div2" >sub text here</div>
</button>

在上面的示例中，我需要屏幕阅读器来阅读以下内容：- “这里是正文，中间是正文，这里是子文本”。我如何表示上面的“介于两者之间”。我尝试了 aria-label \ labelledBy 但那些被讲述人忽略了。

Answer 1

您需要在其自己的

中添加额外的文本，然后使用一个类在视觉上隐藏该元素，但仍允许屏幕阅读器阅读它。这是一种非常普遍的做法。请参阅 What is sr-only in Bootstrap 3? 以获取将执行此操作的类的示例。

还可以查看 WebAIM 的“Invisible Content Just for Screen Reader Users”。

所以你会有类似的东西：

<button>
    <div id="div1" >Main text here</div>
    <div class="sr-only" >in between</div>
    <div id="div2" >sub text here</div>
</button>