检测Chrome浏览器中使用的“高对比度”扩展程序

Question

检测Chrome浏览器中使用的“高对比度”扩展程序

javascriptcssgoogle-chromeaccessibilityhigh-contrast

6

我正在尝试使我的网站在高对比模式下可访问。为了检测是否启用高对比模式，我创建了一个JavaScript方法来检测是否禁用背景图像，因为高对比模式会禁用背景图像。然后，如果浏览器处于高对比模式，我会附加一个CSS文件以进行高对比度显示的修复。这在Firefox、Edge和IE中运行良好，但Chrome使用自己的扩展程序来创建高对比度，并且不会禁用背景图像，因此在Chrome中不会附加高对比度的CSS。

从搜索中我发现，Chrome会在网站上添加滤镜，而不是启用/禁用/更改网站颜色或图像本身。我已经搜索了很多，但我找不到任何可以测试是否使用高对比模式的方法。如果有一种方法可以检测使用的扩展程序，那也可以解决问题，但是我还没有找到这样的方法。

我的代码实际上可以正常工作，我只需要能够检测Chrome中的高对比模式。以下是我用来检查高对比模式的方法：

let highContrast = (options) => {

  let hcDetect = jQuery(`<div id="jQHighContrastDetect"></div>`).css('background', 'url(../uploads/c-wht-small.png)');
  hcDetect.appendTo(document.body);

  if (hcDetect.css('background-image') === 'none') {
    $('head').append('<link rel="stylesheet" href="../css/highcontrast.min.css" type="text/css" media="all">');

  }
}

- CascadiaJS

请参见此链接：https://dev59.com/iUrSa4cB1Zd3GeqPZ-Co。如何通过JavaScript或CSS检查用户是否处于高对比度模式。 - Wesley Abbenhuis

1

@DiceXQ 我已经找到了，它与我正在做的类似，但对于Chrome也不起作用。 - CascadiaJS

值得一提的是，最好尽可能避免这种需要。如果设计符合WCAG AA对比度要求，那么你的项目大部分在各种高对比度模式下都会看起来很好。在大多数高对比度模式下，背景图像将被隐藏，但它们本来就不应该传达重要信息。如果您需要在高对比度模式下显示背景颜色，请考虑使用相同颜色的大边框并将其box-sizing设置为border-box，overflow设置为hidden。 - cage rattler

3个回答

2

“我所需要的是能够检测Chrome中的高对比度模式。”
解决方案 #1：

在我的React/TypeScript项目中，我使用了类似于@Wesley Abbenhuis的答案的代码，但是发现我的组件不需要超时等待，即使它需要几秒钟才能加载完成。实际上，我创建了一个演示React项目来测试第一个加载组件的扩展性，并且没有必要延迟加载。

const htmlTag: HTMLElement = document.getElementsByTagName(
    'html'
  )[0];
const isUsingChromeHighContrastExtension: boolean =
    htmlTag.getAttribute('hc') !== null;

解决方案＃2：

使您的非高对比度代码可访问，这样您就不必首先检测Chrome的高对比度扩展程序。

从WCAG准则1.4.11：非文本对比度中可以看到：

“成功标准1.4.11非文本对比度（AA级）：以下内容的视觉呈现与相邻颜色具有至少3：1的对比度比率：

用户界面组件

用于指示用户界面组件状态和边界的视觉信息，除非是非活动组件或者组件的外观由用户代理确定并且不被作者修改；

图形对象

用于了解内容所需的图形部分，除非特定的图形呈现对传达的信息至关重要。”

- Super Jade

1

Chrome扩展将注入一些代码以生成高对比度LAF。

由于注入的原因，可能需要setTimeout。在我的情况下是必需的。

这对我有用：

setTimeout(function(){
   var htmlTag = document.getElementsByTagName('html');
   console.log(htmlTag[0].getAttribute('hc') != null);
}, 150);

- Wesley Abbenhuis

谢谢@DiceXQ，这正是我所需要的，它完美地工作！ - CascadiaJS

1

我该如何使用事件监听器来采取这种方法？当单击或激活某些元素时，我想保留它们的原始颜色和背景颜色。 - Dylan

1

在我的情况下，不需要使用 setTimeout()。 - Super Jade

@SuperJade，我已经更改了上面的注释以反映它是可选的。 - Wesley Abbenhuis

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- aardrian · Accepted Answer

如果您询问的是 Windows 高对比度模式，那么 Chrome 不知道何时启用它。

通常情况下，如果 Windows 用户选择启用高对比度模式，则该用户在使用 Microsoft Internet Explorer 或 Microsoft Edge 浏览器（因为这些浏览器支持它）。两者都支持专有的 -ms-high-contrast @media 规则。

检查缺少的背景图像是一种在 IE/Edge 中可行的策略，但使用媒体查询是更好的方法。特别是因为 Windows 高对比度模式很快将允许 Edge 中的背景图像。

如果您想检测 Chrome 中某个扩展程序是否设置了自己的高对比度模式，了解该扩展程序将会很有帮助。

例如，使用高对比度扩展程序，您可以在<html>标签上查找以下属性：hc="a3"和hcx="3"（值可能对您不同，但属性应匹配）。如果您打开浏览器开发工具，您可以看到它执行的一些其他操作。但是这些属性位于DOM的最高级别，可能是最安全的使用方式。

如果您询问的是Chrome for Android，则也是一个不同的过程。