如何将可访问性内容添加到HTML“标签”元素？

Question

我只想在label内添加更多其他内容，以实现可访问性。我在span中包含了带有视觉隐藏类的内容。但是，屏幕阅读器（NVDA）无法识别其他内容。

<label for="nameInput"> 
  Name: <span class="sr-only">your name </span> 
</label>
<input id="nameInput" class="components-input" />

我无法将<label>替换为<p aria-label>之类的任何其他标签。

我该如何实现？

Answer 1

aria-label 可以用于非语义元素，例如<div>和<span>，但是您必须给元素一个role。您需要标签和角色，屏幕阅读器才能读取它。

我逐字运行了您的代码示例，它在Firefox 61（量子）和NVDA 20182.1上运行良好。它还与JAWS 2018和11配合使用。

听起来您可能还有其他问题。您有一个可行的示例（codepen或生产站点）可以尝试吗？您是否在其他屏幕阅读器或其他浏览器上尝试过代码？

Answer 2

aria-label属性适用于所有元素。您无需使用段落。