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