移动端表单错误提示仅变色时如何排查

排查原因：颜色是否作为唯一视觉提示

移动端网页中表单验证错误提示仅通过改变颜色显示，可能违反 WCAG 指南 1.4.1 的要求。该指南指出，颜色不能作为传达信息、指示动作或区分视觉元素的唯一视觉手段。如果用户无法感知颜色变化，或者依赖屏幕阅读器等辅助技术，仅变色会导致信息无法被接收。因此，仅靠颜色提示错误是不够的。

在移动端场景下，用户可能处于弱光环境或使用单色显示模式，单纯的颜色变化难以被察觉。此外，辅助技术通常会将颜色变化转换为语音或文本描述，如果代码中未包含额外的文本或图标，屏幕阅读器可能无法读出错误内容。这会导致部分用户无法完成表单填写，影响用户体验和网页的无障碍访问性。

首先，检查表单错误提示的 HTML 结构，确认是否仅使用了颜色样式。例如，验证错误时是否仅修改了输入框边框颜色或文字颜色。如果是，需要添加额外的视觉元素，如错误图标或文字说明。例如，可以在错误字段旁添加一个显眼的图标，并确保图标与颜色变化同时出现。

其次，验证辅助元素是否与颜色变化同步。确保当错误状态触发时，图标和文字提示也一同显示。例如，使用 JavaScript 监听输入框的验证事件，当验证失败时，不仅改变颜色，还显示隐藏的错误提示文本或图标。这样可以确保无论用户是否依赖颜色，都能获取到错误信息。

在代码实现中，可以通过添加 SVG 图标或文本标签来补充颜色提示。例如，在表单字段下方添加一个错误提示文本，并设置其初始状态为隐藏。当验证失败时，通过 CSS 类名切换显示该文本。同时，确保图标和文本的颜色与错误状态一致，以增强视觉识别。

对于移动端，建议使用高对比度的图标和简洁的文字说明。例如，使用红色感叹号图标配合“请填写此项”的文本提示。避免使用纯红色和纯绿色，因为红绿色盲用户可能无法区分。可以选用橙红色和蓝绿色等颜色，既符合 WCAG 要求，又能被大多数用户识别。

完成修改后，使用浏览器开发者工具或辅助技术测试验证提示的完整性。检查屏幕阅读器是否能读出错误图标和文字说明，而不仅仅是颜色变化。同时，在模拟红绿色盲的条件下测试，确认用户仍能通过形状或文字识别错误状态。

最终验证应确保错误提示不仅依赖颜色，还通过图标或文字传达信息。例如，验证成功时显示绿色勾选图标，失败时显示红色感叹号图标和错误文字。这样可以满足 WCAG 指南 1.4.1 的要求，提升移动端表单的无障碍访问性和用户体验。