什么是 aria-label 属性
aria-label 是一种为不具备语义的元素（如 div、span 等）提供文本替代品的 HTML 属性。它常常被用在需要增加辅助功能（Accessibility）的场景中，比如图标按钮、自定义控件等。
具体地，aria-label 可以使屏幕阅读器等辅助技术读出当前元素的含义或用途，从而提高页面的可访问性。
兼容性问题
然而，在过去的一些浏览器版本中，aria-label 并不被进行支持。对于这些浏览器，它们对 aria-label 属性中的文本仅作为普通文本进行处理，而不是将其识别为替代文本。
因此，当我们在开发过程中使用 aria-label 属性时，就需要注意兼容性，并想办法在不支持该属性的浏览器中提供替代文本。
解决方法
一种通用的解决方法是使用 aria-labelledby 属性来替代 aria-label。aria-labelledby 允许我们通过引用其他元素的 ID 来为当前元素提供替代文本。
具体地，我们可以创建一个新的元素，将其隐藏或设置为不可见，然后在该元素中设置文本，最后在 aria-labelledby 属性中引用该元素的 ID。这样，即使浏览器不支持 aria-label，也能通过 aria-labelledby 来提供替代文本。
下面是一个使用 aria-labelledby 实现替代文本的例子：
<button aria-labelledby="btn-label">submit</button> <span id="btn-label" class="visually-hidden">submit form</span>
在这个例子中，我们创建了一个按钮元素，并使用 aria-labelledby 属性来引用 ID 为 "btn-label" 的元素。该元素中设置了文本内容 "submit form"，同时使用样式 "visually-hidden" 将其隐藏。
总结
通过使用 aria-labelledby 属性，我们可以很好地解决浏览器对 aria-label 属性的兼容性问题。同时，这种方法还可以为我们提供更多的灵活性和控制，使得我们能够为不同的元素提供不同的替代文本。
在实际开发中，为了提高页面的可访问性，我们应该始终牢记辅助功能的重要性，并尽可能地使用辅助技术来完善我们的页面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ebfd1bf6b2d6eab36489d4