我们的设计系统团队正在努力使我们的应用符合 WCAG 标准。今天，对于必填字段，我们在输入中内有一个橙色星号，表示该字段何时尚未完成，一旦在该字段中输入条目，该星号就会消失。长期以来，它对我们的用户群都非常有效。
我们目前使用的橙色对比度不够，必须更改。在调查我们如何解决这个问题的过程中，团队坚持 WCAG 要求所需的指示器位于标签级别而不是输入级别，并且它必须是红色的。
这准确吗？
【问题讨论】：
标签： input label accessibility wcag high-contrast
这里有几点需要说明。 （我假设这是一个 Web 应用程序，因为您没有指定，如果不是，您可能需要找到我在此处建议的技术的等价物）。
是的，橙色的颜色对比度在白色背景上永远不够好，因此您需要将其更改为红色。请注意，红色也不是对比度很高的颜色，因此 AA is #EB0000 和 AAA is #B30000 的最低值。
它必须是红色的，但这是预期的行为，很多可访问性是关于用户期望看到的指示一个错误。如果它是黑色的并且有一个图标/某种方式来区分它是一个错误，这也很好。
您确实需要在标签内指明字段是必需的。这主要适用于屏幕阅读器用户，因为屏幕阅读器不会在您的输入中“看到”您的图标。
星号不是最佳选择，屏幕阅读器无法很好地读出它。你应该在标签上添加一些visually hidden text，上面写着“必需”，以获得最大的可访问性，而不会过多地改变你的设计（如果它符合你的审美，你仍然可以在标签上使用星号，但是如果你可以使“必需”工作是最佳选择，因为它可以帮助有认知障碍的人）。
如上所述，没有理由删除框中的星号，它为填写内容提供了一个很好的视觉线索。只需确保无法通过屏幕阅读器访问星号 (即alt="" 用于图像或aria-hidden 如果它是样式文本/内联SVG。您可能还需要添加role="presentation" 以确保完整性。如果它是SVG，您可能还需要添加tabindex="-1" 和focusable="false"因为 Internet Explorer 将使一些 SVG 具有焦点。）
【讨论】：