Erkennen des kontrastreichen Modus im Chrome-Browser

Ich versuche, meine Website im kontrastreichen Modus zugänglich zu machen. Um zu erkennen, wenn der Hochkontrastmodus aktiviert ist, habe ich eine JavaScript-Methode entwickelt, um zu erkennen, ob Hintergrundbilder deaktiviert sind, weil der Hochkontrastmodus Hintergrundbilder deaktiviert. Wenn der Browser im Hochkontrastmodus ist, füge ich eine CSS-Datei an mache Korrekturen für die Anzeige in hohem Kontrast. Dies funktioniert in Firefox, Edge und IE gut, aber Chrome verwendet eine eigene Erweiterung, um einen hohen Kontrast zu erstellen, und deaktiviert die Hintergrundbilder nicht, sodass in Chrome die CSS für hohen Kontrast nicht angehängt wird.Erkennen des kontrastreichen Modus im Chrome-Browser

Von der Suche habe ich festgestellt, dass Chrome einen Filter über die Website im Gegensatz zum Aktivieren/Deaktivieren/Ändern der Website Farben oder Bilder selbst hinzugefügt. Ich habe gesucht und gesucht, aber ich kann nichts finden, um zu prüfen, ob Chrome den Modus mit hohem Kontrast verwendet. Wenn es einen Weg gäbe herauszufinden, welche Erweiterungen verwendet werden, würde das auch das Problem lösen, aber ich war auch nicht in der Lage, einen Weg zu finden, dies zu tun.

Mein Code funktioniert tatsächlich gut, alles was ich brauche, ist in der Lage, den kontrastreichen Modus in Chrome zu erkennen. Hier ist die Methode, die ich verwende, um auf den Modus mit hohem Kontrast zu prüfen.

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">'); 
 

 
    } 
 
}

Wenn Sie mehr von dem Code sehen wollen, lassen Sie es mich wissen, ich bin nur nicht sicher, was sonst noch hilfreich wäre, zu zeigen.

Danke, wenn für alle Hilfe voraus!

Quelle

2016-07-20 CascadiaJS

siehe: http: // stackoverflow.com/questions/1921047/how-to-check-wenn-user-is-in-high-contrast-mode-via-javascript-or-css – DiceXQ

@DiceXQ Ich fand das schon, es ist ähnlich wie das, was ich tue, aber es funktioniert auch nicht für Chrome. – CascadiaJS

Erwähnenswert, dass es am besten ist, diese Notwendigkeit wo immer möglich zu vermeiden. Wenn die Entwürfe den WCAG AA-Kontrastanforderungen entsprechen, werden die meisten Ihrer Projekte in den verschiedenen kontrastreichen Modi gut aussehen. Hintergrundbilder werden in den meisten kontrastreichen Modi verborgen sein, aber sie sollten niemals wichtige Informationen vermitteln. Wenn Sie möchten, dass Hintergrundfarben im Modus mit hohem Kontrast angezeigt werden, sollten Sie große Rahmen derselben Farbe verwenden und Ihre Boxgröße auf "Rahmen", "Überlauf" auf "Versteckt" einstellen. –

Die Chrome Extension wird Code injizieren, um einen High Contrast LAF zu generieren.

Die Zeitüberschreitung ist Duo zur Injektion erforderlich.

Das ist für mich gearbeitet:

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

Quelle

2016-07-20 23:17:47 DiceXQ

Dank @DiceXQ das ist genau das, was ich brauchte, es funktioniert perfekt! – CascadiaJS

Wie würde ich diesen Ansatz mit einem Event-Listener verwenden? Ich möchte die ursprünglichen Farben und Hintergrundfarben einiger Elemente beibehalten, wenn sie beim Klicken geändert werden oder wenn sie aktiv sind. – Dylan

Wenn Sie über Windows High Contrast-Modus fragen, Chrome nicht weiß, wann das aktiv ist.

Wenn ein Windows-Benutzer den High Contrast Mode aktiviert hat, surft dieser Benutzer im Allgemeinen in Microsoft Internet Explorer oder Microsoft Edge (wie diese Browser dies unterstützen). Beide unterstützen die proprietäre -ms-high-contrast@media Regel.

Die Suche nach einem fehlenden Hintergrundbild ist eine Taktik, die in IE/Edge funktioniert, aber die Verwendung der Medienabfrage ist ein besserer Ansatz. Vor allem seit Windows High Contrast Mode will soon allow background images in Edge.

Wenn Sie feststellen möchten, ob eine bestimmte Erweiterung in Chrome einen eigenen Modus mit hohem Kontrast eingestellt hat, wäre es hilfreich zu wissen, welche Erweiterung.

Zum Beispiel mit der Erweiterung High Contrast Sie für die folgenden Attribute auf dem <html> Tag aussehen: hc="a3" und hcx="3" (die Werte können für Sie unterschiedlich sein, aber die Attribute entsprechen sollte). Wenn Sie die Browser-Entwicklungstools öffnen, können Sie einige andere Dinge sehen, die es tut. aber diese Attribute sind auf der höchsten Ebene des DOM und wahrscheinlich am sichersten zu verwenden.

Wenn Sie nach Chrome für Android fragen, ist das auch ein anderer Prozess.

Quelle

2016-07-21 16:09:34 aardrian

Danke @aardrian, ich benutze '-ms-high-contrast' auch, aber ich brauche einen Haken für Chrome. Ich teste gerade mit "HIGH Contrast", aber ich brauche den Test, um für so viele kontrastreiche Erweiterungen wie möglich zu arbeiten, denn wer weiß, was die tatsächlichen Benutzer in der Praxis verwenden werden. – CascadiaJS

Wenn wir nur den Marktanteil jeder Erweiterung sehen könnten, um unseren Support zu priorisieren. Dev Tools sind meine Methode, um zu sehen, was sich ändert, wenn ich eine Erweiterung starte. Viel Glück. – aardrian

Re "Chrome weiß nicht, wann das aktiv ist", tatsächlich tut es jetzt, zumindest in Windows 10. Und wenn Chrome erkennt, dass es anbietet, seine eigene kontrastreiche Erweiterung oder dunkles Thema aufzustellen. – Fizz

Erkennen des kontrastreichen Modus im Chrome-Browser

Antwort

Verwandte Themen