表单字段添加说明，提升可访问性

或 ），且带有明确的 id。这个 id 将作为 aria-describedby 的值。

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

在表单控件上设置 aria-describedby

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

• 例如：<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 管理，保持职责分离

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~