在开发 Web 应用程序时，部分用户可能会有视觉、听觉、认知或运动方面的障碍。为了让所有用户都能够方便地完成表单填写等任务，我们可以通过一些简单的技术手段来增强应用程序的无障碍性。其中一个关键技术就是使用 aria-describedby。
什么是 aria-describedby？
aria-describedby 是由 WAI-ARIA（Web Accessibility Initiative-Accessible Rich Internet Applications）提供的一组属性，可以为具有 label 的元素提供额外的描述信息。这些描述信息可以帮助有视觉、听觉、认知或运动方面障碍的用户更好地理解表单控件的用途和功能，从而更加轻松地完成相关任务。
如何使用 aria-describedby？
使用 aria-describedby 简单易懂。只需要将被描述元素的 ID 值指定为对应的 aria-describedby 属性值即可。下面是一个简单的例子：
<label for="username">用户名：</label> <input type="text" id="username" aria-describedby="username_help"> <p id="username_help">请输入您的用户名（6-20个字符）。</p>
在上面的例子中，输入框的 label 标签为“用户名”，该元素的 ID 为“username”。为了给输入框提供更多的辅助信息，我们创建了一个 paragraph 标签，该元素的 ID 为“username_help”，并将该元素的 ID 值指定为 aria-describedby 属性的值。这样一来，当用户进入输入框时，屏幕读取器会将“请输入您的用户名（6-20个字符）”读出来，并将其描述为“用户名”的相关帮助信息。
使用 aria-describedby 时，我们应该注意以下几点：
只有在需要提供额外信息时才使用 aria-describedby。对于 label 标签等已经提供足够信息的元素，不需要额外添加描述信息。
描述信息应当简洁明了，不要过于冗长，避免繁琐的说明。
描述信息应当清晰地描述目标元素的功能、用途、格式等重要信息。
aria-describedby 示例代码
下面是一个更细致的示例代码，该代码为一个登录表单添加了描述信息：
-- -------------------- ---- -------
------
-----
------ ---------------------------
------ ----------- ------------- ---------------------------------
-- -----------------------------------------
------
-----
------ --------------------------
------ --------------- ------------- ---------------------------------
-- --------------------------------------
------
------- -------------------------
-------总结
使用 aria-describedby 可以有效地增强应用程序的无障碍性，为有视觉、听觉、认知或运动方面障碍的用户提供更好的用户体验。我们可以使用简单的 HTML 代码将相关描述信息与表单控件关联起来，为用户提供更加良好的使用体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64eb2053f6b2d6eab35c7f20