html - 如何将可访问性内容添加到 HTML 'label' 元素？
问题描述
我只是想在里面添加一些额外的内容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>或其他标签。
我怎样才能做到这一点？
解决方案
aria-label 确实适用于非语义元素，例如<div>and<span>但你必须给元素一个角色。您需要一个标签和一个角色才能让屏幕阅读器阅读它。
我逐字运行了您的代码示例，它在 firefox 61 (quantum) 和 nvda 20182.1 上运行良好。它也适用于 JAWS 2018 和 ie 11。
听起来您可能还有其他问题。你有一个工作示例（codepen 或生产站点）可以尝试吗？您是否使用其他屏幕阅读器或其他浏览器尝试了您的代码？