在 Web 开发中，提高可用性和无障碍性已成为越来越重要的话题。有些用户可能会使用屏幕阅读器或其他辅助技术访问您的网站，这意味着您需要确保您的应用程序是可访问的，并能够提供信息以帮助这些用户使用您的应用程序。
在这篇文章中，我们将介绍如何使用 aria-describedby 和 aria-labelledby 来增强您的 Web 应用程序的无障碍性。
什么是 aria-describedby 和 aria-labelledby？
要理解 aria-describedby 和 aria-labelledby，我们需要了解一个角色和属性的概念。
在无障碍性方面，每个 HTML 元素都有一个角色，例如按钮、链接、文本框。角色定义了元素的功能和交互行为，并告诉用户如何与元素交互。
属性是一种告诉屏幕阅读器更多关于元素的信息的方法。通过设置属性，您可以提供关于元素的更详细的信息，例如标签、提示和其他有关如何使用元素的信息。
aria-describedby 和 aria-labelledby 属性是两个常用的属性，是为了允许开发人员提供更多有关元素的信息。
- aria-describedby：允许您为元素提供文本描述，以提供关于元素的更多信息。此属性的值应该是一个元素的 ID，该元素包含有关元素的描述文本。
- aria-labelledby：允许您为元素提供标签，以描述它们的用途。此属性的值应该是一个标题元素的 ID，标题元素应负责为元素提供一个简短的、可识别的描述（例如
<label>元素）。
aria-describedby 和 aria-labelledby 的使用场景
让我们来看一个实际的使用场景：表单输入框。
假设您有一个表单输入框，它的作用是让用户输入电话号码。在这种情况下，我们可以使用 aria-labelledby 来添加标签，以便用户知道输入框的用途。但是，如何提供更多关于输入框的信息，例如输入格式或是否需要带区号？
这是我们可以使用 aria-describedby。我们可以添加一个元素，其中包含更多的信息，例如输入格式以及是否需要带区号。然后，我们将这个元素的 ID 设置为 aria-describedby 属性的值。
下面是一个实际的示例代码：
<label for="phone">电话号码：</label>
<input type="tel" id="phone" aria-describedby="phone-description">
<span id="phone-description">
请输入您的电话号码，包括区号。例如：（202）555-1234。
</span>在这个示例中，我们为输入框添加了标签并设置了 ID，以便用户知道输入框的用途。我们还添加了一个 span 元素，并将其 ID 设置为 phone-description。这个 span 元素包含更多的信息，例如输入格式和所需的区号。最后，我们将这个 span 元素的 ID 设置为 aria-describedby 属性的值。
如何确保无障碍性
虽然我们已经添加了 aria-describedby 和 aria-labelledby 属性，但这并不能保证我们的应用程序是无障碍的。
在确保您的应用程序是无障碍的方面，还有一些其他的最佳实践，例如：
- 使用有意义的标题元素：对于表单元素和其他交互组件，使用标签而不是其他元素（例如 div 元素）。
- 避免使用不必要的空格和标点符号：尽量少使用不必要的空格和标点符号，这也可以使屏幕阅读器更容易理解您的内容。
- 提供足够的反馈：提供足够的反馈，例如错误消息和成功消息，以保证用户知道正在发生什么，并理解下一步该做什么。
总结
无障碍性已经成为网站开发的重要话题。通过使用 aria-describedby 和 aria-labelledby 属性，在您的网站中提供更多的有关元素的信息，可以增强您的网站的无障碍性。但这并不能保证您的应用程序是无障碍的。通过实现其他无障碍性最佳实践，可以确保您的应用程序对所有用户都可用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e681adf6b2d6eab31e61d1