灰色链接:Lighthouse 抱怨对比度不足

Grayed out links: Lighthouse complains about insufficient contrast

我想在没有新闻通讯的几个月内在我的网站上显示灰色的占位符文本。

Lighthouse(在 Chrome 开发工具中)抱怨说这些变灰的项目“没有足够的对比度”,但这是故意的。

有什么方法可以注释元素以向 Lighthouse(和任何屏幕阅读器)解释我的意图——即他们应该被忽略?

可以安全地忽略 Lighthouse 中的任何错误。您无需在此执行任何操作。

根据 WGAC 2.1 中的成功标准 1.4.3 对比度(最低),您无需为属于“非活动用户界面组件”(包括禁用文本)的文本或图像保持颜色对比度。

Success Criterion 1.4.3 Contrast (Minimum)

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

...

Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

https://www.w3.org/TR/WCAG21/#contrast-minimum

WebAIM 支持此解释,其中指出:

WCAG 2.0 defines four types of "incidental" text that are not required to meet the contrast requirements.

Inactive: An inactive element, like a disabled Submit button ( Submit ), is identified visually by its lower-contrast state...

https://webaim.org/articles/contrast/#incidental

您可以告诉辅助技术要忽略不活动的字符串,但这对阅读这些字符串有困难的用户没有帮助,因为他们的视力不如平均水平,或者因为他们正在查看 UI 光线不足。你不想让他们理解那些字符串吗?如果不这样做,为什么要显示这些字符串?事实上,它们对任何用户有什么好处?如果不显示 UI 是否更容易理解和导航?