随着 Web 应用程序的不断发展，我们需要更好地支持用户使用辅助技术，如屏幕阅读器等。为此，我们需要确保我们的网站和应用程序符合无障碍性标准。其中，ARIA（可访问性增强）规范提供了许多属性和角色，以帮助我们构建无障碍性友好的 Web 应用程序。其中一个重要的属性是 aria-describedby。
什么是 aria-describedby？
aria-describedby 属性是一种 ARIA 规范，它允许我们将一些辅助性文本与某个元素相关联。这些文本通常用于提供关于元素的更多信息，例如表单输入字段的说明或按钮的功能描述。
aria-describedby 的使用方法
使用 aria-describedby 属性非常简单。我们只需要将其添加到需要关联的元素上，并将其值设置为相关文本的 ID。例如，下面的代码段演示了如何将一个标题元素与一个段落元素相关联：
<h1 id="title">这是一个标题</h1> <p aria-describedby="title">这是一个段落，它与上面的标题相关联。</p>
在这个例子中，我们将标题元素的 ID 设置为 title，然后将 aria-describedby 属性添加到段落元素中，并将其值设置为标题元素的 ID。这样，当屏幕阅读器读取段落元素时，它将自动读取标题元素的内容作为辅助性文本。
此外，aria-describedby 属性也可以与多个元素相关联。例如，我们可以将一个段落元素与多个其他元素相关联，如下所示：
<p aria-describedby="note1 note2">这是一个段落，它与多个其他元素相关联。</p> <span id="note1">这是相关联的第一个元素。</span> <span id="note2">这是相关联的第二个元素。</span>
在这个例子中，我们将 aria-describedby 属性设置为多个元素的 ID，以将这些元素与段落元素相关联。
aria-describedby 的指导意义
使用 aria-describedby 属性可以使我们的应用程序更加无障碍性友好。屏幕阅读器用户可以更轻松地了解页面上的元素，并获得更多的上下文信息。此外，使用 aria-describedby 属性还可以帮助我们遵守无障碍性标准，例如 WCAG 2.0 级别 AA。
示例代码
<h1 id="title">这是一个标题</h1> <p aria-describedby="title">这是一个段落，它与上面的标题相关联。</p> <p aria-describedby="note1 note2">这是一个段落，它与多个其他元素相关联。</p> <span id="note1">这是相关联的第一个元素。</span> <span id="note2">这是相关联的第二个元素。</span>
总结
aria-describedby 属性是一个非常有用的属性，它可以帮助我们构建无障碍性友好的 Web 应用程序。通过将元素与相关联的文本相关联，我们可以为屏幕阅读器用户提供更多的上下文信息，从而提高他们的体验。在编写 Web 应用程序时，请务必考虑使用 aria-describedby 属性，以确保您的应用程序符合无障碍性标准。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655c4d58d2f5e1655d6675aa