使用 aria-describedby 提供额外上下文
附加会在名称后朗读的提示和帮助信息。
使用 aria-describedby 提供额外上下文 是 CoddyKit 上的免费 Web Accessibility Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Web Accessibility Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Web Accessibility Academy 课程共包含 4 节课。
超越名称
有时，控件仅有名称还不够。aria-describedby 会附加额外的上下文，屏幕阅读器会在名称之后读出这些内容。
它引用 ID
与 labelledby 类似，aria-describedby 保存另一个元素的 id。浏览器会提取该元素中的文本，将其作为描述。
<input aria-describedby="hint">
<p id="hint">Use 8+ characters</p>先读名称，再读描述
屏幕阅读器会先读出名称，短暂停顿后再读出描述。这样的顺序有助于用户快速理解控件。
非常适合提示
格式规则等字段提示应放在 aria-describedby 中，这样字段获得焦点时，屏幕阅读器会自动读出这些指导信息。
<input aria-describedby="fmt">
<p id="fmt">Format: DD/MM/YYYY</p>它不能替代名称
描述只是补充信息。如果元素只有 aria-describedby 而没有名称，它实际上仍然没有标签。
组合多个 ID
为 aria-describedby 提供多个以空格分隔的 id，浏览器会连接它们的文本。这对于同时提供提示和错误信息很方便。
<input aria-describedby="hint err">错误信息也是描述
让 aria-describedby 指向验证消息，这样屏幕阅读器会在读出字段时一起读出错误信息，而不是让错误信息孤零零地出现在页面其他位置。
<input aria-describedby="err">
<p id="err">Email is required</p>保持描述简短
描述应当是简短的句子。每次都会完整读出冗长的 aria-describedby 文本，很快就会让人感到厌烦。
它会保持可见
与隐藏的标签不同，被引用的提示通常会继续在屏幕上可见，因此既能帮助其他用户，也能帮助视力正常的用户。
支持情况可能不同
大多数屏幕阅读器都会处理 aria-describedby，但有些阅读器只会在特定模式下读出它，因此请使用真实的屏幕阅读器测试提示。
describedby 与 labelledby
使用 aria-labelledby 表示控件的名称，使用 aria-describedby 提供控件的额外信息。它们承担不同的职责。
快速检查
您希望在字段名称之后读出密码规则。应使用哪个属性？
回顾：添加上下文
您了解到，aria-describedby 会引用 id，在名称之后读出提示和错误信息，为名称提供补充，但绝不会替代名称。💬
常见问题解答
「使用 aria-describedby 提供额外上下文」课时是免费的吗？
是的 — 「使用 aria-describedby 提供额外上下文」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Web Accessibility Academy 课程的其余内容，请升级到 CoddyKit PRO。 Web Accessibility Academy 课程共包含 4 节课。
「使用 aria-describedby 提供额外上下文」这节课中我会学到什么？
附加会在名称后朗读的提示和帮助信息。 你通过在浏览器中直接运行的动手代码来练习 Web Accessibility Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Web Accessibility Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Web Accessibility Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「使用 aria-describedby 提供额外上下文」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Web Accessibility Academy 课中编写并运行代码吗？
能。每节 Web Accessibility Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 无障碍名称计算揭秘
- aria-label 与 aria-labelledby
- 使用 aria-describedby 提供额外上下文
- 让控件失去声音的常见命名错误