标准答案
- 状态不能只用颜色表达，成功、警告、错误、禁用、选中都应该有文字或形状辅助。
- 表单错误要提供明确错误文案，并通过 aria-describedby 关联到输入框。
- 焦点状态要清晰可见，不要移除 outline 后没有替代样式。
- 颜色对比度要满足可读性要求，尤其是正文、按钮和错误提示。
- 图标、边框、背景、文字和状态属性可以组合使用，但不要让图标成为唯一信息来源。
题目解析
这题考的是可访问性设计。颜色是辅助信号，不应该是唯一信号。
好的状态样式应该让用户不看颜色也能判断发生了什么、下一步该怎么做。
代码示例
错误状态同时有边框、文字说明和 aria 关联。
HTML
<label for="email">邮箱</label>
<input id="email" aria-invalid="true" aria-describedby="email-error">
<p id="email-error" class="field-error">邮箱格式不正确</p>CSS
.field-error {
color: #b42318;
font-weight: 600;
}
input[aria-invalid="true"] {
border-color: #b42318;
box-shadow: 0 0 0 2px rgba(180, 35, 24, .16);
}常见误区
- 只用红色和绿色区分错误和成功。
- 移除 focus outline 后没有提供新的焦点样式。
- 错误提示没有和表单控件关联，屏幕阅读器用户不知道哪里错了。