应使用 aria-describedby 而非 title 关联提示文本，因其能稳定触发屏幕阅读器播报；需为输入框设置 aria-describedby 指向独立提示元素，动态更新以适配错误状态，多提示用空格分隔 ID，并为自定义控件手动实现绑定。
用 aria-describedby 关联提示文本而非 title
浏览器原生 title 属性对屏幕阅读器支持极不稳定，部分读屏软件会跳过、延迟播报，或与焦点事件错位。真正可依赖的是 aria-describedby，它明确将提示内容绑定到输入控件，并在焦点进入时主动读出。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 为每个需要提示的
<input>添加aria-describedby，值设为提示元素的id（如aria-describedby="email-hint"） - 提示元素必须是独立、可聚焦的 DOM 节点（如
<div id="email-hint">请输入公司邮箱</div>），不能是title或注释 - 避免复用同一
id：多个输入共用一个提示 ID 会导致读屏软件混淆上下文 - 若提示含 HTML（如链接或强调文字），需确保其语义完整，且不破坏阅读顺序
动态更新 aria-describedby 以适配错误状态
表单验证失败时，提示内容常从“格式说明”切换为“错误信息”。若不更新 aria-describedby，屏幕阅读器仍会读旧提示，用户无法感知校验结果。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 提交或失焦后，校验失败则修改
input的aria-describedby指向错误容器（如aria-describedby="email-error"） - 校验通过后，清空
aria-describedby或恢复指向原始提示 ID，避免残留错误引用 - 错误容器需设
role="alert"和aria-live="polite"，确保变化被即时播报 - 不要仅靠 CSS 显示/隐藏错误提示——屏幕阅读器不会读
display: none或visibility: hidden的内容
多提示共存时用空格分隔 ID 列表
一个输入框可能同时需要格式说明、必填标识、错误提示三类辅助文本。aria-describedby 支持多个 ID，但必须用空格分隔，不能用逗号或分号。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 写法示例：
aria-describedby="password-hint password-req password-error" - 阅读顺序按 ID 在 DOM 中出现的先后顺序，而非书写顺序，因此提示元素应按逻辑顺序排列（如先说明、再要求、最后错误）
- 避免 ID 名称含空格或特殊字符——
password hint是非法 ID，应写作password-hint - 若某类提示临时不可用（如无错误），不要留空 ID（如
"password-hint password-error"），应动态拼接有效 ID 字符串
自定义控件必须手动实现 aria-describedby 绑定
用 <div> + JS 实现的下拉、开关、评分组件等，原生不支持 aria-describedby 自动关联。若未手动挂载，提示将完全失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 为自定义控件根节点添加
role（如role="combobox"），并设置aria-describedby指向外部提示元素 - 监听控件焦点变化，在获得焦点时主动触发
aria-describedby对应内容的播报（部分读屏需 JS 主动focus()提示元素） - 禁用状态（
aria-disabled="true"）下，仍需保留aria-describedby，否则用户无法获知“为何不可操作” - 切勿假设用户会看视觉提示——没有
aria-describedby，色弱或低视力用户根本看不到小字号灰色提示
