Обнаружение использования расширения High Contrast в браузере Chrome

Я пытаюсь сделать свой сайт доступным в высококонтрастном режиме. Чтобы определить, включен ли режим высокой контрастности, я создал метод 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">');

  }
}


javascript google-chrome css accessibility high-contrast
person CascadiaJS    schedule 20.07.2016    source источник
comment
см.: stackoverflow.com/questions/1921047/   -  person Wesley Abbenhuis    schedule 21.07.2016
comment
@DiceXQ Я уже обнаружил, что это похоже на то, что я делаю, но это также не работает для Chrome.   -  person CascadiaJS    schedule 21.07.2016
comment
Стоит отметить, что лучше избегать этой необходимости везде, где это возможно. Если проекты соответствуют требованиям контрастности WCAG AA, то большая часть вашего проекта будет хорошо выглядеть в различных режимах высокой контрастности. Фоновые изображения будут скрыты в большинстве высококонтрастных режимов, но в любом случае они не должны нести важную информацию. Если вам требуется, чтобы фоновые цвета отображались в режиме высокой контрастности, рассмотрите возможность использования больших рамок того же цвета и установите для размера окна значение border-box, overflow — hidden.   -  person cage rattler    schedule 19.07.2017

Ответы (3)


arrow_upward
1
arrow_downward

Расширение Chrome добавит некоторый код для создания высококонтрастного LAF.

setTimeout может потребоваться для инъекции. В моем случае это было необходимо.

Это сработало для меня:

setTimeout(function(){
   var htmlTag = document.getElementsByTagName('html');
   console.log(htmlTag[0].getAttribute('hc') != null);
}, 150);
person Wesley Abbenhuis    schedule 20.07.2016
comment
Спасибо @DiceXQ, это именно то, что мне было нужно, все работает отлично! - person CascadiaJS; 21.07.2016
comment
Как бы я использовал этот подход, используя прослушиватель событий? Я хотел бы сохранить исходные цвета и цвета фона нескольких элементов, когда они меняются при нажатии или если они активны. - person Dylan; 13.01.2017
comment
В моем случае setTimeout() не понадобилось. - person Super Jade; 28.11.2019
comment
@SuperJade Я изменил примечание выше, чтобы отразить, что это необязательно. - person Wesley Abbenhuis; 29.11.2019

arrow_upward
4
arrow_downward

Если вы спрашиваете о режиме высокой контрастности Windows, Chrome не знает, когда он активен.

Как правило, если пользователь Windows включил режим высокой контрастности, то этот пользователь просматривает страницы в Microsoft Internet Explorer или Microsoft Edge (поскольку эти браузеры его поддерживают). Оба они поддерживают проприетарное правило -ms-high-contrast @media.

Проверка отсутствующего фонового изображения — это тактика, которая будет работать в IE/Edge, но лучше использовать медиа-запрос. Тем более, что режим высокой контрастности Windows скоро разрешить фоновые изображения в Edge.

Если вы хотите определить, когда конкретное расширение установило свой собственный режим высокой контрастности в Chrome, было бы полезно знать, какое именно расширение.

Например, с помощью расширения High Contrast можно просматривать для следующих атрибутов тега <html>: hc="a3" и hcx="3" (у вас могут быть разные значения, но атрибуты должны совпадать). Если вы откроете инструменты разработчика браузера, вы увидите, что он делает и другие вещи. но эти атрибуты находятся на самом высоком уровне DOM и, вероятно, наиболее безопасны в использовании.

Если вы спрашиваете о Chrome для Android, это тоже другой процесс.

person aardrian    schedule 21.07.2016
comment
Спасибо @aardrian, я тоже использую -ms-high-contrast, но мне нужен чек для Chrome. Сейчас я тестирую с высокой контрастностью, но мне нужно, чтобы тест работал с максимально возможным количеством высококонтрастных расширений, потому что кто знает, что реальные пользователи будут использовать на практике. - person CascadiaJS; 21.07.2016
comment
Если бы мы только могли видеть долю рынка каждого расширения, чтобы определить приоритеты нашей поддержки. При этом инструменты разработчика — это мой способ увидеть, что, черт возьми, меняется, когда я запускаю расширение. Удачи. - person aardrian; 21.07.2016
comment
Re Chrome не знает, когда это активно, на самом деле он знает сейчас, по крайней мере, в Windows 10. И когда Chrome обнаруживает, что он предлагает установить собственное высококонтрастное расширение или темную тему. - person Fizz; 27.10.2017

arrow_upward
2
arrow_downward

... все, что мне нужно, это иметь возможность обнаруживать высококонтрастный режим в Chrome


Решение №1:

В моем проекте React/TypeScript я использовал код, похожий на ответ @Wesley Abbenhuis, но обнаружил, что мне не нужен тайм-аут для моего компонента, загрузка которого заняла секунды. На самом деле, я создал демо-проект React, который тестировал расширение в первом загружаемом компоненте, и задержка не понадобилась.

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

Решение №2:

Сделайте свой невысококонтрастный код доступным, и вам вообще не придется обнаруживать высококонтрастное расширение Chrome.

Из критерия 1.4.11 WCAG: нетекстовый контраст :

Критерий успеха 1.4.11 Нетекстовый контраст (уровень AA): Визуальное представление следующего имеет коэффициент контрастности не менее 3:1 по отношению к соседним цветам:

Компоненты пользовательского интерфейса

Визуальная информация, используемая для обозначения состояний и границ компонентов пользовательского интерфейса, за исключением неактивных компонентов или тех случаев, когда внешний вид компонента определяется пользовательским агентом и не изменяется автором;

Графические объекты

Части графики, необходимые для понимания содержания, за исключением случаев, когда конкретное представление графики необходимо для передачи информации.

person Super Jade    schedule 20.08.2019