无障碍性（Accessibility）是指使得网站、应用或其他技术工具能够被更广泛的人士使用，包括那些有视力、听力、肢体或认知障碍的人士。在设计和开发网站或应用的过程中，开发者应该优先考虑提高产品的无障碍性，从而让每个人都能够轻松访问和使用。
ARIA（Accessible Rich Internet Applications）就是为了增加无障碍性而制定的一组规范。ARIA 可以通过添加属性和角色来标识网站中不同的部分，从而让屏幕阅读器和其他辅助技术更好地理解和操作页面。
在这篇文章中，我们将重点讨论 ARIA 的一个属性——aria-describedby，探讨如何使用它来提高无障碍性。
什么是 aria-describedby 属性？
aria-describedby 属性是用于描述一个元素的文本内容的。指定描述文本的 ID 后，屏幕阅读器将在访问该元素时读取这段文本内容，从而帮助用户更好地理解页面。
另外，aria-describedby 属性对于一些表单控件也是很有用的（比如错误消息提示）。我们可以将出错信息的 ID 使用 aria-describedby 属性绑定到文本框的相应属性上，从而帮助用户了解他们输入的是否正确。
示例代码
以下代码演示了如何在 HTML 中使用 aria-describedby 属性：
<div aria-describedby="description1"> 这个 div 是一个例子 </div> <p id="description1"> 这个 div 显示了一个例子，它展示了如何使用 aria-describedby 属性。 </p>
上述代码中，我们将一个文本块的 ID 绑定到了 div 的 aria-describedby 属性上。当用户使用屏幕阅读器访问该 div 时，阅读器将首先阅读描述该 div 的文本内容。
使用 aria-describedby 提高无障碍性
使用 aria-describedby 属性可以帮助人们更好地理解页面内容，提高无障碍性。下面是使用 aria-describedby 属性的一些最佳实践：
最佳实践一：将描述文本放在元素前面
文本的语境对于用户理解该文本内容至关重要。因此，我们应该将描述元素的文本放在元素前面，而不是后面。这可以使用户能够立即了解到元素的描述信息。
最佳实践二：避免使用空属性值
在使用 aria-describedby 属性时，我们应该避免将该属性的值设置为空。这样做虽然不会影响网站的可用性，但会导致阅读器忽略该属性，因此无法为用户提供任何有用的信息。
最佳实践三：合理使用多个描述信息
在某些情况下，一个元素可能需要多个描述信息。例如，我们可以给输入框同时提供一个关于字段内容的描述和一个关于错误信息的描述。
如果需要提供多个描述信息，我们可以使用一个空格分隔的 ID 列表来指定多个描述文本的 ID。例如：
<input type="text" aria-describedby="description1 description2" />
在这个示例中，我们可以用 "description1" 属性描述输入框，用 "description2" 属性描述输入框的错误信息。
结论
在网站和应用的设计和开发过程中，提高无障碍性应该是我们的首要任务之一。使用 ARIA 属性和角色可以为人们提供更加友好，易于使用的页面。
aria-describedby 属性可帮助人们更好地了解页面内容，从而提高无障碍性。在使用这个属性时，我们应该注意遵循最佳实践，为所有用户提供更好的使用体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676d5d7c82fcee791c673cee