必需的指示符是否必须总是红色并且在Web表单的标签级别？

Question

我们的设计系统团队正在努力使我们的应用程序符合WCAG。今天，对于必填字段，我们在输入中有一个橙色星号，该字段显示该字段尚未完成的时间，一旦在该字段中输入了一项，该字段就会消失。对于我们的用户群来说，它运行了很长时间。

我们目前使用的橙色对比度不足，必须更改-在调查我们如何进行时，团队坚持WCAG要求所要求的指标在标签级别而不是输入级别-并且必须是红色。

这准确吗？谢谢！

Answer 1

这里有几点要说明。 （我假设这是您未指定的Web应用程序，否则，您可能需要找到与我在此处建议的技术等效的工具。）>

1. 是的，橙色在白色背景上的色彩对比度永远不会足够好，因此您需要将其更改为红色。请注意，因为红色也不是很高的对比度颜色，因此AA is #EB0000和AAA is #B30000的最小值。

2. 并非have

为红色，但是这是预期的行为，许多可访问性与用户expects所看到的指示错误有关。如果它是黑色的，并且带有图标/以某种方式区分出它是错误，则也可以。

3. 您确实需要表示必填字段标签内

。这主要是针对屏幕阅读器用户，因为屏幕阅读器不会在您的输入中“看到”您的图标。

4. 星号不是最佳选择，屏幕阅读器无法很好地读出它。您应该在标签上添加一些visually hidden text表示“必需”，以实现最大的可访问性，而无需过多更改设计（然后，如果适合您的审美，您仍可以在标签上使用星号，但是如果您可以进行“必需”的工作，是最佳选择，因为它可以帮助认知障碍患者。

5. 上面说的是，没有理由在框中删除您的星号，它为填写内容提供了很好的视觉提示。只需确保无法通过屏幕阅读器访问星号（即[ alt=""用于图像，或aria-hidden如果是样式文本/嵌入式SVG。您可能还想添加role="presentation"以提高完整性；如果是SVG，则可能还需要添加tabindex="-1"和focusable="false"作为Internet资源管理器将使某些SVG更具针对性。）