非文本元素和UI控件的对比度要求

Question

我试图确保正确地解释WCAG2.0AA对比要求：

文本和图像的视觉呈现比例至少为4.5:1。 最小对比度成功标准(1.4.3)适用于页面中的文本，包括占位符文本和当指针悬停在对象上或对象具有键盘焦点时显示的文本。如果在页面中使用其中的任何一个，则文本需要提供足够的对比度。虽然这个成功标准只适用于文本，但对于图表、图表和其他非基于文本的信息中的内容，也会出现类似的问题。以这种方式呈现的内容也应该有良好的对比，以确保更多的用户可以访问信息。

这是否意味着所有文本元素都应该有至少4.5:1的最小对比度，但非文本元素，如UI选择控件(复选框、单选按钮、开关、滑块等)却没有对比度要求？

参考资料：https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html

Answer 1

在AA级，SC 1.4.3并不是唯一与对比相关的WCAG2.1成功标准。SC1.4.3已经存在于WCAg 2.0中，并且只适用于文本。这为许多其他类型的内容留下了漏洞，这些内容对用户的理解很重要，但不依赖文本。

因此，WCAG2.1引入了SC 1.4.11非文本对比，它适用于用户界面组件和图形对象。此成功标准也适用于“非文本元素，如UI选择控件(复选框、单选按钮、开关、滑块等)”(引用自问题)。

理解成功标准1.4.11包含许多示例，例如按钮、复选框、单选按钮、星级小部件和各种类型的图形对象。该文档不包含滑块示例，即使成功标准也适用于该类型的组件(例如，对滑块的拇指及其值进行足够的对比)。

如果您在需要符合WCAG2.1的管辖范围内工作，SC 1.4.11将适用。如果您在一个仍然需要符合WCAG2.0而尚未符合WCAG2.1的管辖范围内工作，SC 1.4.11还不适用于您的内容，尽管满足该要求是个好主意。

Answer 2

克利斯朵夫在理解规则方面给出了一个很好的答案。我想补充一些太大的东西，不能发表评论。

不再以遵从性为目标，而是将WCAG更多地用作检查表，而不是一组需求。

WCAG的关键部分是“G”-指南。它们的编写是为了指导和教育，而不是成为一套严格的规则(可悲的是，这样就不会有那么多的confusion....but了，这是为了另一天！)呵呵)

因此，对于上面的例子，你已经意识到颜色对比是一个问题。太棒了，现在集中精力问一些问题，比如‘一个色彩对比度低的人会如何使用我的网站’

当您这样做时，您需要越来越少地依赖WCAG逻辑。你有个按钮来控制什么吗？然后确保它是高对比度。

有动作的图标吗？确保它足够大，对于那些视力差的人。

接近可访问性的一个更好的方法(一旦你知道WCAG的大致笔画)是问‘这个项目将如何被人访问：’

• 使用低对比度感知(比4.5:1或更高，但7:1)
• 谁是完全色盲的(色彩不仅仅是传达意义的方式)
• 谁是盲人(它需要ARIA，我的ARIA标签和标签是否正确，用屏幕阅读器测试？)
• 谁是失聪(字幕、成绩单和字幕、BSL和ASL如果你真的要这么做的话！)
• 谁是移动能力受损的(想想看，Parkinsons --按钮大到连鼠标/手都摇摇晃晃地点击，手机上有足够的空白来触摸滚动区域，而当你不太准确的时候点击一个链接)。
• 谁有焦虑障碍(简单的设计，可以撤销操作，任何改变都必须明确声明，例如，如果筛选列表不自动更新，而是有一个应用按钮(或者警告它自动更新，因此它是预期的)，没有自动播放视频，可以关闭动画等。
• 谁有学习障碍/认知障碍( 12岁的阅读年龄)--简单的单词、表格都有标签，这样就可以看到已经填写的内容(不管怎么说，都是由屏幕阅读器覆盖的)，没有复杂的Captchas等等。

- Reading age of a 12 year old as 1 in 5 Adults (in the UK at least) has the reading age of a 12 year old so don't alienate them - doesn't just help disabled people (as with most accessibility stuff)

​

如果你觉得自己特别勇敢，想想那些使用眼凝视技术或口语软件(例如龙自然语言)与你的网站进行交互的人(如严重活动/四肢瘫痪)。

如果你考虑到人，并且更多地关注人与人之间的互动，以及个人可能有哪些需求，那么你在可访问性方面的能力就会提高一倍，并且付出一半的努力。

然后，它成为您在设计时思考的一部分，您将为按钮留下足够的空间等等，您也开始更多地重视语义( <button>元素作为按钮，而不是<div> -令人震惊！)

不好意思，这里有点咆哮，希望你能明白的重点是人和他们的需求，而不是的规则/准则。