html - 将 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>

关于html - 将 aria-label 添加到文本元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57350452/