0

我们的设计系统团队正在研究使我们的应用程序符合 WCAG 标准。今天，对于必填字段，我们在输入中有一个橙色星号，表示该字段未完成的时间，一旦在该字段中输入条目，该星号就会消失。长期以来，它对我们的用户群都非常有效。

我们目前使用的橙色没有足够的对比度，必须改变。在调查我们如何解决这个问题的过程中，团队坚持 WCAG 要求所需的指标处于标签级别而不是输入级别，并且必须是红色的。

这是准确的吗？

4

1 回答 1

2

这里有几点需要说明。（我假设这是一个 Web 应用程序，因为您没有指定，如果不是，您可能需要找到我在此处建议的技术的等价物）。

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

  2. 它不一定是红色的，但是这是预期的行为，并且很多可访问性是关于用户期望看到的指示错误的内容。如果它是黑色的并且有一个图标/某种方式来区分它是一个错误，这也很好。

  3. 您确实需要在标签中指明一个字段是必需的。这主要适用于屏幕阅读器用户，因为屏幕阅读器不会在您的输入中“看到”您的图标。

  4. 星号不是最佳选择，屏幕阅读器无法很好地读出星号。您应该在标签上添加一些视觉上隐藏的文本，上面写着“必需”，以获得最大的可访问性，而不会过多地改变您的设计（如果它符合您的审美，您仍然可以在标签上使用星号，但是如果您可以使“必需”工作是最佳的，因为它可以帮助有认知障碍的人）。

  5. 如上所述，没有理由删除框中的星号，它为填写内容提供了一个很好的视觉线索。只需确保无法通过屏幕阅读器访问星号（即alt=""用于图像或aria-hidden如果它是样式文本/内联 SVG。为了完整性，您可能还想添加role="presentation"。如果它是 SVG，您可能还想添加tabindex="-1"，focusable="false"因为 Internet Explorer 将使一些 SVG 成为焦点。）

于 2020-04-29T07:50:04.710 回答