如何将辅助功能内容添加到 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>，但您必须为该元素赋予角色。 您需要一个标签和一个角色，屏幕阅读器才能读取它。

我逐字运行了您的代码示例，它与 Firefox 61(量子(和 nvda 20182.1 配合良好。 它还适用于JAWS 2018和ie 11。

听起来你可能有其他问题。 您是否有工作示例(代码笔或生产站点(可以尝试？ 您是否使用其他屏幕阅读器或其他浏览器尝试过代码？

Answer 2

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