我正在尝试使我的网站在高对比模式下可访问。为了检测是否启用高对比模式,我创建了一个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">');
}
}