AI for Web/Contrast/UI components -如何确定产品磁贴上产品图像的“视觉边界”

Question

例如，在微软网站上，URL：https://www.microsoft.com/en-us/store/collections/surfacelist?icid=MSCOM_QL_Surface&headerid=department-surface，您可以看到几个产品图块，其中包含一个浅灰色矩形上的产品图像。

根据Web/对比度/UI组件的可访问性洞察，任何指示组件的可点击区域的视觉边界都必须具有至少3:1的对比度，即相邻背景的对比度。

浅灰色矩形表示可点击边界与背景的对比度仅为1.14:1。那么，这些产品磁贴是否不符合此标准(WCAG 2.1，1.4.11非文本对比度)？

Answer 1

我是Accessibility Insights团队的工程师。这是Accessibility Insights for Web's Contrast > UI components requirement中的一个bug，被追踪为microsoft/accessibility-insights-web #2809。Accessibility Insights用于此要求的语言比WCAG 2.1第1.4.11节所要求的更严格。

特别是，Understanding Success Criterion 1.4.11包含了涉及这种情况的特定语言；它的“边界”一节阐明，由于这些小部件包含具有3:1对比度的文本，并且文本指示小部件的存在，因此小部件的边界没有必要具有3:1的对比度。引用该指南(重点是我的)：

边界

此成功标准不要求控件具有指示命中区域的可视边界，但如果控件的可视指示器是标识控件的only方式，则该指示器必须具有足够的对比度。如果按钮中的文本(或图标)或文本输入中的占位符文本可见，并且没有可见的命中区域，则通过成功标准。如果包含文本的按钮也具有彩色边框，则为，因为边框不提供除文本对比度之外没有对比度要求的唯一指示。