应使用 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 实现的下拉、开关、评分组件等,原生不支持 <code>aria-describedby 自动关联。若未手动挂载,提示将完全失效。
实操建议:
- 为自定义控件根节点添加
role(如role="combobox"),并设置aria-describedby指向外部提示元素 - 监听控件焦点变化,在获得焦点时主动触发
aria-describedby对应内容的播报(部分读屏需 JS 主动focus()提示元素) - 禁用状态(
aria-disabled="true")下,仍需保留aria-describedby,否则用户无法获知“为何不可操作” - 切勿假设用户会看视觉提示——没有
aria-describedby,色弱或低视力用户根本看不到小字号灰色提示











