H3.11.2color-only errors fail announcement设计
仅靠颜色变化传递错误状态的方式对播报无效
别名: 颜色不是错误 · color-only error · 边框变红
概念解释
边框变红、标签变色、图标换成另一种色相,对视觉是状态,对屏幕阅读器通常什么都没发生——颜色不是可被朗读的文本,也不是名称或描述的变化。仅靠颜色传递错误,播报通道是空的。这条不管要不要主动开口,只指出颜色这一通道对辅助技术无效。它也不是在谈色盲用户的视觉辨认。
机制
辅助技术朗读的是可访问名称、描述、值和状态属性,不是计算样式。CSS 换色不更新这些字符串,实时区域也没有新文本可送。用户线性读到该字段时,听到的仍是原来的标签,于是把失败的字段当成还能提交的字段。即使用户知道「有问题」,问题在哪一个字段上,颜色也给不出可导航的目标。文本和图标(不只靠色相)才能同时服务视觉差异和朗读内容。
边界
颜色仍然可以作为视觉层的加速线索,只要同一状态还用文字或状态属性表达。高对比主题下红框可能更明显,这不让颜色变成播报。把颜色写成「红色边框表示错误」的图例,对屏幕阅读器用户没有用,除非图例本身会被读到且字段会引用它——那已经不是仅靠颜色了。
怎么落地
- 错误状态必须改变可访问名称或描述,或增加一段真实文本;禁止只改边框色。
- 图标或文字标记与颜色同时出现;标记要有文本替代,不能是纯装饰。
- 在无样式或强制单色的环境下走一遍,错误字段仍应能被分辨和朗读。
- 验证:关掉 CSS 颜色(或用屏幕阅读器虚拟缓冲只看文本)。若失败字段与合法字段的文字完全一样,这条状态就没进入播报。