如何将可访问性内容添加到 HTML 'label' 元素？

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 (quantum) 和 nvda 20182.1 上运行良好。它还适用于 JAWS 2018 和 ie 11。

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

Answer 2

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