在现代 Web 开发中，我们通常会使用一些辅助功能来增强用户体验，尤其是对于那些有视觉障碍的用户。其中，ARIA 属性就是一种非常重要的辅助功能，它可以让我们更好地描述页面内容，以便于辅助技术能够理解和传达这些信息。
在本文中，我们将重点介绍两个 ARIA 属性：aria-describedby 和 aria-labelledby，它们都可以用于传递页面信息，但是在不同的场景下使用。
aria-describedby 属性
aria-describedby 属性用于将一个或多个元素的描述文本与另一个元素关联起来。这个描述文本通常是一些补充信息，可以帮助用户更好地理解页面内容。举个例子，我们可以使用 aria-describedby 属性来将一个表单元素的描述信息与该元素关联起来，以便于用户更好地了解该表单元素的作用。
下面是一个示例代码：
<label for="username">用户名：</label> <input type="text" id="username" aria-describedby="username-help"> <div id="username-help">请输入您的用户名，长度应在 6 到 12 个字符之间。</div>
在这个例子中，我们使用了 aria-describedby 属性将输入框的描述信息与一个 div 元素关联起来。当屏幕阅读器读取输入框时，它会自动读取与之关联的描述信息，从而帮助用户更好地理解输入框的作用。
需要注意的是，aria-describedby 属性可以引用多个元素的 ID，这些 ID 之间使用空格分隔。这意味着我们可以将一个元素的描述信息与多个元素关联起来，以便于将这些信息传达给用户。
aria-labelledby 属性
aria-labelledby 属性用于将一个元素的标签文本与另一个元素关联起来。这个标签文本通常是一个元素的说明或标题，可以帮助用户更好地理解该元素的作用。与 aria-describedby 属性不同，aria-labelledby 属性通常用于将一个元素的标签文本与其它元素关联起来。
下面是一个示例代码：
<h2 id="section-title">这是一个章节标题</h2> <div aria-labelledby="section-title"> <p>这是一个章节的内容，其中包含了一些文本和图片。</p> <img src="example.jpg" alt="这是一个示例图片"> </div>
在这个例子中，我们使用了 aria-labelledby 属性将一个 div 元素的标签文本与一个 h2 元素关联起来。当屏幕阅读器读取这个 div 元素时，它会自动读取与之关联的 h2 元素的标签文本，从而帮助用户更好地理解这个 div 元素的作用。
需要注意的是，aria-labelledby 属性可以引用一个或多个元素的 ID，这些 ID 之间使用空格分隔。这意味着我们可以将一个元素的标签文本与多个元素关联起来，以便于将这些信息传达给用户。
总结
通过使用 aria-describedby 和 aria-labelledby 属性，我们可以更好地传达页面信息，从而提高页面的可访问性和用户体验。需要注意的是，这些属性只是辅助功能，我们还需要在页面结构、样式和交互方面做出相应的改进，以便于更好地满足用户的需求。
最后，我们建议在编写代码时尽可能地遵循 WAI-ARIA 规范，以便于更好地实现页面的可访问性和可用性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65597d46d2f5e1655d3e69fc