在前端开发中，我们经常需要确保网站的无障碍性，让视觉障碍用户也能够轻松访问我们的网站。表单元素是网站无障碍性中一个非常重要的组成部分。本文将介绍如何通过使用 aria-labelledby 属性，增强表单元素的无障碍性，提供更好的用户体验。
什么是 aria-labelledby 属性？
ARIA（Accessible Rich Internet Applications）是一项由 W3C 推出的标准，目的是为了提高 Web 页面的可访问性。其中 aria-labelledby 属性用于为一个元素提供一个或多个元素的 ID，来描述当前元素的内容或用途。
aria-labelledby 的不同用途
aria-labelledby 属性可以用来增强许多表单元素的无障碍性，大致分为以下几种用途。
1. 为表单元素添加标签
有些表单元素并没有明显的标签，例如一些自定义的滑块、开关等。这时候，我们可以使用 aria-labelledby 属性来将一个或多个标签与该元素关联。例如：
---- ------------- ------------------------------ --------------- ---- ---------------------------- ------ ----- ------------------------- ------------- ----- ------------------------- ---------
上述示例中，我们使用 aria-labelledby 属性将两个 span 元素与 role="slider" 的 div 元素关联。这两个 span 元素就相当于表单元素的标签，aria-labelledby 的属性值为这两个标签元素的 ID。这样，屏幕阅读器就可以正确地读出该滑块的用途和当前的值。
2. 修改表单元素标签
有些表单元素的标签可能不太符合个人或某个群体的需要。这时候，我们可以使用 aria-labelledby 属性来修改其标签。例如：
------ --------------------- ----- ---- ----------------- ------ ----------- ------------- --------------------------------- ----- ------------------------ ------ -------- -------------
上述示例中，我们使用 aria-labelledby 属性修改了 label 的标签。label 元素的 for 属性与输入框的 id 相对应，而 aria-labelledby 的属性值为自定义的标签元素的 ID。
3. 组合多个表单元素的标签
有时候，一个表单元素的标签需要包含多个元素，例如一个下拉列表的标签可能需要包含一个图标和一个文字。这时候，我们可以使用 aria-labelledby 属性来组合多个元素的 ID，将其作为表单元素的标签。例如：
------ ----------- ---- ------------------ -------- ----- -- ------------ - ----------- -------- ------- --------- ----------------------------- ------- ---------------------------- ------- -------------------------- ------- ---------------------------------- ------- -------------------------- --------- ----- --------------- --------------- ------ ---- ------------------ -------- ----- -- ------------ - ----------- -------
上述示例中，我们使用 aria-labelledby 属性组合了一个 label 元素和自定义的 span 元素，将其作为表单元素的标签，同时将原先的 label 元素中的所有内容隐藏起来，保证了页面的美观性。
如何正确使用 aria-labelledby 属性
在使用 aria-labelledby 属性时，需要注意以下几点：
- 标签元素的 ID 在同一个页面内必须唯一。
- 不要在标签元素内使用其他带
aria-属性的元素。 - 使用
aria-labelledby时，不要再给表单元素添加aria-label属性或label元素。
结论
使用 aria-labelledby 属性可以提高表单元素无障碍性，提供更好的用户体验。熟练掌握 aria-labelledby 的不同用途，我们可以为不同的表单元素添加标签、修改标签和组合标签，使用户在使用表单元素时更加方便和舒适。具体实现时，我们需要注意 aria-labelledby 属性的使用规范和注意事项，保障页面的可访问性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671b4a689babaf620faa9048