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

Detect High Contrast extension use in Chrome browser

本文关键字：对比度扩展 Chrome 浏览器 检测      更新时间：2023-09-26

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

通过搜索，我发现Chrome在网站上添加了一个过滤器，而不是启用/禁用/更改网站颜色或图像本身。我搜索了又搜索，但找不到任何可以测试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">');
  }
}

如果您询问Windows高对比度模式，Chrome不知道该模式何时处于活动状态。

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

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

如果你想检测某个特定的扩展程序何时在Chrome中设置了自己的高对比度模式，那么了解哪个扩展程序会很有帮助。

例如，使用High Contrast扩展，您可以在<html>标记上查找以下属性：hc="a3"和hcx="3"（值可能不同，但属性应该匹配）。如果你打开浏览器开发工具，你可以看到它所做的其他事情。但这些属性处于DOM的最高级别，使用起来可能最安全。

如果你问的是安卓版Chrome，那也是一个不同的过程。

我所需要的就是能够在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：

用户界面组件

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

图形对象

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

Chrome扩展插件将注入一些代码来生成高对比度的LAF。

由于注入，可能需要setTimeout。就我而言，这是必需的。

这对我有效：

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