在前端开发中，我们经常需要关注网站或应用的可访问性（Accessibility），也就是如何让用户能够更加方便地使用我们的产品。而其中一个重要的方面就是使用 ARIA（Accessible Rich Internet Applications）属性，其中 aria-labelledby 属性就是其中一个非常有用的属性。
什么是 aria-labelledby 属性？
aria-labelledby 属性用于将一个元素与一个或多个文本标签相关联。这个属性的值应该是一个或多个元素的 ID，这些元素的文本内容将被用作于描述该元素的标签。这样，当屏幕阅读器读取页面内容时，它会将这些文本标签一起读出来，从而提供更好的可访问性。
如何设置 aria-labelledby 属性？
设置 aria-labelledby 属性非常简单，只需要在需要关联的元素上添加一个 aria-labelledby 属性，然后将其值设置为与之相关的文本标签的 ID 即可。例如，我们可以将一个按钮与一个文本标签关联起来：
<button aria-labelledby="btn-label">Click me</button> <span id="btn-label">This is a button</span>
在这个例子中，我们将按钮的 aria-labelledby 属性设置为 "btn-label"，这个值对应着一个 ID 为 "btn-label" 的 span 元素，span 元素中包含了按钮的文本标签。
aria-labelledby 属性的运用技巧
1. 使用 aria-labelledby 属性来提高表单的可访问性
表单是网站或应用中最常见的交互元素之一。然而，当表单中有多个输入框时，有时会出现用户不知道该输入什么的情况。这时，我们可以使用 aria-labelledby 属性来将输入框与其标签相关联，从而提供更好的可访问性。
<label id="name-label">Name:</label> <input type="text" aria-labelledby="name-label">
在这个例子中，我们将输入框的 aria-labelledby 属性设置为 "name-label"，这个值对应着一个 ID 为 "name-label" 的 label 元素，label 元素中包含了输入框的标签。
2. 使用 aria-labelledby 属性来提高可访问性的导航菜单
导航菜单是网站或应用中必不可少的元素，然而，当导航菜单中有多个链接时，有时用户不知道该点击哪一个链接。这时，我们可以使用 aria-labelledby 属性来将每个链接与其标签相关联，从而提供更好的可访问性。
// javascriptcn.com 代码示例
<nav>
<ul>
<li><a href="#" aria-labelledby="home-label">Home</a></li>
<li><a href="#" aria-labelledby="about-label">About</a></li>
<li><a href="#" aria-labelledby="contact-label">Contact</a></li>
</ul>
</nav>
<div id="home-label">Go to the home page</div>
<div id="about-label">Learn about our company</div>
<div id="contact-label">Contact us</div>在这个例子中，我们将每个链接的 aria-labelledby 属性分别设置为与之相关的文本标签的 ID，从而提供更好的可访问性。
总结
了解并熟练掌握 aria-labelledby 属性的设置方法与运用技巧，可以大大提高网站或应用的可访问性。在使用 aria-labelledby 属性时，我们应该注意将元素与其标签相关联，从而提供更好的可访问性。同时，我们也应该遵循 WAI-ARIA 规范，以确保我们的网站或应用具有良好的可访问性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655d60f3d2f5e1655d7a2742