aria-describedby 用于关联说明文字与表单控件，提升可访问性；需用唯一、语义化 ID 引用独立 HTML 元素，支持多 ID 空格分隔，不可替代 label，内容须简洁明确，并通过屏幕阅读器真实测试验证。

用 aria-describedby 可以把一段说明文字和表单控件关联起来，让屏幕阅读器在读取控件时自动朗读说明，特别适合解释格式要求、限制条件或业务规则等复杂内容。

确保说明文字有唯一 ID

被引用的说明文本必须是一个独立的 HTML 元素（如 <div>、<p> 或 <span>），且带有明确的 id。这个 id 将作为 aria-describedby 的值。

• 避免多个元素共用同一个 id，否则屏幕阅读器可能只读第一个或行为不可预测
• ID 值应语义清晰，比如 email-hint 比 hint1 更易维护
• 说明文字可以放在控件上方、下方或旁边，位置不影响功能，但建议靠近控件提升视觉可理解性

在表单控件上设置 aria-describedby

将控件的 aria-describedby 属性值设为说明元素的 id。支持多个 ID，用空格分隔，适用于同时需要提示 + 错误消息 + 格式示例的场景。

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

• 例如：<input aria-describedby="password-hint password-strength">
• 如果说明文本是动态插入的，记得同步设置 ID 并确保 DOM 已就绪后再绑定属性
• 不要用 aria-describedby 替代 label —— 它补充说明，不替代标签的必选语义

让说明内容本身更友好

屏幕阅读器会逐字朗读 aria-describedby 所指向的内容，所以文字需简洁、具体、无歧义。

• 避免模糊表述，如“请按要求填写” → 改为“密码需包含至少 1 个大写字母、1 个小写字母和 1 个数字”
• 慎用缩写或行话；如必须使用，首次出现时给出全称，例如“增值税（VAT）”
• 若含链接、按钮等交互元素，确保它们也具备可访问性（如 role="link"、tabindex="0"、键盘可用）

测试与常见误区

仅写对代码不等于体验到位，真实环境验证很关键。

• 用 NVDA + Firefox 或 VoiceOver + Safari 测试：聚焦输入框，听是否完整读出说明
• 避免把长段落塞进一个 aria-describedby——超过 2–3 句可能信息过载，可拆成多个 ID 分别引用
• 不要把错误消息也硬塞进同一个说明元素里；错误应由 aria-invalid 和 aria-errormessage 管理，保持职责分离