在h5中实现盲人读屏友好校验语音播报，核心是通过aria-live区域动态暴露错误语义并触发及时播报，配合aria-invalid和aria-describedby明确错误归属；禁用alert、纯视觉提示及speechsynthesis等破坏可访问性的方案。
在 H5 中实现针对盲人读屏软件友好的自定义校验语音播报，核心是让错误信息能被读屏软件主动、及时、准确地朗读出来，而不是依赖视觉提示或被动等待焦点进入。关键不在于“播放语音”，而在于“暴露语义”和“触发播报时机”。
用 aria-live 区域动态播报错误
这是最常用且兼容性最好的方式。将校验结果（如“手机号格式不正确”）放入一个 aria-live="polite" 或 aria-live="assertive" 的容器中，读屏软件会自动朗读内容变更：
- polite：适合非中断性提示（如表单输入过程中的弱提醒），读屏会等当前朗读结束后再播；
- assertive：适合关键错误（如提交失败、必填未填），会立即打断当前播报并朗读；
- 容器需保持 DOM 存在（不要销毁重挂），仅更新 innerText/innerHTML；
- 避免用 display: none / visibility: hidden 隐藏该区域，推荐用
position: absolute; left: -9999px;实现视觉隐藏但语义保留。
结合 aria-invalid 和 aria-describedby 提升上下文感知
单纯播报不够，还需让读屏用户知道“这个错误属于哪个控件”。对出错的 input 元素设置：
-
aria-invalid="true"：明确标识字段无效； -
aria-describedby="error-id"：指向对应错误文案的元素 ID，读屏聚焦该输入框时会一并朗读描述； - 确保 error-id 对应的元素已存在且可访问（不能是 display: none）；
- 若校验后动态插入错误文案，需保证其 ID 与 aria-describedby 值一致，并且 DOM 已就绪。
避免常见破坏可访问性的写法
以下做法会导致读屏无法播报或播报混乱：
- 用 alert() 或自定义弹窗显示错误：会打断操作流，且部分读屏对非标准模态框支持差；
- 仅靠 color/red 文字提示：纯视觉，对屏幕阅读器完全不可见；
- 错误文案放在 input 后面但无 aria-describedby 关联：读屏不会主动关联；
- 用 JS 模拟语音播放（如 speechSynthesis）：多数读屏会屏蔽或忽略，且无法与页面语义同步，还可能干扰读屏原有播报节奏。
简单示例结构
一个带手机号校验的输入框可这样组织：
<label for="phone">手机号</label><br><input type="tel" id="phone" aria-invalid="false" aria-describedby="phone-error"><br><div id="phone-error" aria-live="polite" style="position: absolute; left: -9999px;"></div>
JS 校验失败时只需：
document.getElementById('phone').setAttribute('aria-invalid', 'true');<br>document.getElementById('phone-error').textContent = '手机号格式不正确，请输入11位数字';
