6

我试图让我的网站以高对比度模式访问。为了检测何时启用高对比度模式，我创建了一个 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">');

  }
}

4

3 回答 3

4

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

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

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

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

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

如果您询问适用于 Android 的 Chrome，那也是一个不同的过程。

于 2016-07-21T16:09:34.740 回答
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：

用户界面组件

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

图形对象

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

于 2019-08-20T21:24:39.607 回答
1

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

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

这对我有用：

setTimeout(function(){
   var htmlTag = document.getElementsByTagName('html');
   console.log(htmlTag[0].getAttribute('hc') != null);
}, 150);
于 2016-07-20T23:17:47.090 回答