Input 在web表单上,所需的指示器是否必须始终为红色且处于标签级别?

Input 在web表单上,所需的指示器是否必须始终为红色且处于标签级别?,input,label,accessibility,wcag,high-contrast,Input,Label,Accessibility,Wcag,High Contrast,我们的设计系统团队正在研究使我们的应用程序符合WCAG。今天,对于必填字段,我们在输入中有一个橙色星号,显示字段何时尚未完成,并且在字段中输入一个条目后将消失。对于我们的用户群来说,它已经运行了很长一段时间 我们目前使用的橙色对比度不够,必须进行更改。在调查我们如何做到这一点的过程中,团队坚持WCAG要求所需的指标必须在标签级别,而不是输入级别,并且必须是红色 这准确吗?这里有几点需要说明。(我假设这是一个web应用程序,因为您没有指定,如果没有指定,您可能需要找到与我在此建议的技术等效的技术)

我们的设计系统团队正在研究使我们的应用程序符合WCAG。今天,对于必填字段,我们在输入中有一个橙色星号,显示字段何时尚未完成,并且在字段中输入一个条目后将消失。对于我们的用户群来说,它已经运行了很长一段时间

我们目前使用的橙色对比度不够,必须进行更改。在调查我们如何做到这一点的过程中,团队坚持WCAG要求所需的指标必须在标签级别,而不是输入级别,并且必须是红色


这准确吗?

这里有几点需要说明。(我假设这是一个web应用程序,因为您没有指定,如果没有指定,您可能需要找到与我在此建议的技术等效的技术)

  • 是的,在白色背景上,橙色的颜色对比度永远都不够好,所以你需要将其改为红色。小心,因为红色也不是一种对比度很高的颜色,所以为和的最低值

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

  • 您确实需要指示标签中需要一个字段。这主要针对屏幕阅读器用户,因为屏幕阅读器不会在输入中“看到”您的图标

  • 星号不是最好的选择,它不能被屏幕阅读器很好地读出。你应该在标签上添加一些写着“必需”的内容,以便在不太改变你的设计的情况下实现最大的可访问性(如果符合你的审美要求,你仍然可以在标签上使用星号,但是如果你可以使“必需”的内容达到最佳效果,因为它可以帮助认知障碍者)

  • 如上所述,没有理由删除方框中的星号,它提供了一个很好的视觉线索,说明要填写什么。只需确保星号不能通过屏幕阅读器访问(即图像的
    alt=”“
    ,如果是文本/内联SVG,则为
    aria hidden
    。您可能还需要添加
    role=“presentation”
    ,以确保完整性。如果是SVG,则可能还需要添加
    tabindex=“-1”
    focusable=“false”
    因为Internet explorer将使一些SVG成为焦点。)


  • 这里有几点需要说明。(我假设这是一个web应用程序,因为您没有指定,如果没有指定,您可能需要找到与我在此建议的技术等效的技术)

  • 是的,在白色背景上,橙色的颜色对比度永远都不够好,所以你需要将其改为红色。小心,因为红色也不是一种对比度很高的颜色,所以为和的最低值

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

  • 您确实需要指示标签中需要一个字段。这主要针对屏幕阅读器用户,因为屏幕阅读器不会在输入中“看到”您的图标

  • 星号不是最好的选择,它不能被屏幕阅读器很好地读出。你应该在标签上添加一些写着“必需”的内容,以便在不太改变你的设计的情况下实现最大的可访问性(如果符合你的审美要求,你仍然可以在标签上使用星号,但是如果你可以使“必需”的内容达到最佳效果,因为它可以帮助认知障碍者)

  • 如上所述,没有理由删除方框中的星号,它提供了一个很好的视觉线索,说明要填写什么。只需确保星号不能通过屏幕阅读器访问(即图像的
    alt=”“
    ,如果是文本/内联SVG,则为
    aria hidden
    。您可能还需要添加
    role=“presentation”
    ,以确保完整性。如果是SVG,则可能还需要添加
    tabindex=“-1”
    focusable=“false”
    因为Internet explorer将使一些SVG成为焦点。)


  • 听起来像是对中的例子的浅读。听起来像是对中的例子的浅读。