提供帮助文本和无障碍性信息：理解 aria-describedby 和 aria-labelledby
在前端开发中，为了使得网站能够适应残疾人用户的需求，开发者不能忽视无障碍性相关的技术。其中，提供帮助文本和无障碍性信息是解决无障碍性问题的重要方法之一。本篇文章将介绍其中两个常用的属性 aria-describedby 和 aria-labelledby，希望能够对开发者有所帮助。
什么是 aria-describedby 和 aria-labelledby？
aria-describedby 和 aria-labelledby 是两个用于提供帮助文本和无障碍性信息的 WAI-ARIA 属性。它们可以用于在网页标签中添加其他文本或提示信息，以帮助用户更好地使用网站。
aria-describedby 属性：指定了元素相关的帮助文本、提示、或者描述内容，这些内容会为应用程序或屏幕阅读器提供给残疾人用户的额外信息。
aria-labelledby 属性：指定了一个或多个元素的 ID，这些元素的内容将为应用程序或屏幕阅读器提供额外信息，帮助用户理解元素的作用与功能。
如何使用 aria-describedby 和 aria-labelledby？
aria-describedby的使用
举个例子，假设我们的页面中有一段文字需要为其添加一个提示信息，帮助用户更好地理解这段文字的含义。那么，我们可以这样使用 aria-describedby 属性：
<p id="example" aria-describedby="tip">这是一个示例。</p> <div id="tip" class="hidden">这是一个示例，它可以用于展示 aria-describedby 的使用。</div>
在上面的代码中，我们在 p 元素上定义了 aria-describedby 属性，并将值设置为 "tip"，这表明这个元素需要展示 "tip" 元素的内容作为帮助文本。然后，我们在页面中添加了一个隐藏的 div 元素，并将其 ID 也设置为 "tip"，这个 div 元素中的内容就是我们需要展示的提示信息。当用户使用屏幕阅读器或其他辅助技术时，它们将会把 "tip" 元素的内容读取给用户。
aria-labelledby的使用
再举个例子，假设我们需要为页面中的某个表单控件添加一个标签，帮助用户理解这个控件的作用。那么，我们可以这样使用 aria-labelledby 属性：
<label id="username-label">请输入用户名：</label> <input type="text" id="username" aria-labelledby="username-label">
在上面的代码中，我们先定义了一个 label 元素，并将其 ID 设置为 "username-label"，这个 label 元素中包含了需要展示的文本 "请输入用户名："。然后，我们在 input 元素上定义了 aria-labelledby 属性，并将其值设置为 "username-label"，这表明这个 input 元素需要展示 "username-label" 元素的内容作为描述信息。这样做可以帮助用户更好地理解 input 控件的作用。
注意事项
在使用 aria-describedby 和 aria-labelledby 属性时，需要注意以下几点：
属性值应该是一个 ID，而不是元素的 class 或者其他属性。
提供的描述和帮助文本应该简短明了，不应该过于冗长。
对于多个 aria-describedby 属性，它们所引用的元素 ID 应该使用空格隔开。
对于一个元素同时使用了 aria-described 和 aria-labelledby 属性的情况，屏幕阅读器优先展示 aria-described 内容。
总结
本文介绍了如何使用 aria-describedby 和 aria-labelledby 属性，以提供帮助文本和无障碍性信息，希望能对你在开发过程中遇到无障碍性相关的问题有所帮助。提供足够的无障碍性信息以确保所有用户都可以轻松地使用网站，将是前端开发中必不可少的一个方向。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64eaf296f6b2d6eab35a85a4